focusNode property

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

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 7.6.1

Syntax

JavaScript	`p = object.focusNode`

Property values

Type: Object

the end point of a selection.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 7.6.1

Remarks

The Selection.extentNode alias for this property is only available in Microsoft Edge.

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.

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.

C++


<!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>