This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

focusNode

Summary

Retrieves the element or node that contains the end of a selection.

Property of dom/Selectiondom/Selection

Syntax

Note: This property is read-only.

var oNode = selObj.focusNode;

Return Value

Returns an object of type DOM NodeDOM Node

Returns the node in which the selection ends.

Examples

The following example shows the text content that is contained within the node (or tags) that is in focus when you click a section of text.

<!DOCTYPE html>
<html>
  <head>
<!-- this example displays the character offset from anchor node of your selection-->
    <title>focusNode Example</title>
    <script type="text/javascript">
      function getfocusNode() {
        if (window.getSelection) {                      //only work if supported
           var selection = window.getSelection ();      //get the selection object
           var focusNodeProp = selection.focusNode;     //get the node containing the end of selection
           alert ( "Text of current node: \n" + focusNodeProp.toString() + "\nTag name: <" + focusNodeProp.parentNode.tagName +">");
           }
      }
    </script>
  </head>
<body>
<div onmouseup="getfocusNode()">    <!-- call the function when the mouse button is released -->
      <p>
        Select some text with your mouse within this field.
        When <strong>the left <em>button</em> is released</strong>, a dialog box appears with the focusNode.
      </p>
      <p>
        The nested tags <strong>here and <em>there</em> can</strong> demonstrate different focusNodes as well.
      </p>
    </div>
  </body>
</html>

Notes

Remarks

Returns null if the selection does not exist. As a Selection object consists of a list of Range objects, focusNode returns the value of the endContainer attribute of the last Range object in the list.

Syntax

Standards information

Attributions