HTML DOM compareDocumentPosition() Method ❤️

The DOM compareDocumentPosition() method is used to compare two nodes and it returns an integer describing where they are positioned in the document.

Syntax:

node1.compareDocumentPosition(node2)

Return Value : This return an integer value and their meaning as follows :

1: This means that the two nodes do not belong to the same document.
2: This means that the two nodes node1 is positioned after node2.
4: This means that the two nodes node1 is positioned before node2.
8: This means that the two nodes node1 is positioned inside node2.
16: This means that the two nodes node2 is positioned inside node1.
32: This means that the two nodes have no relationship or they are two attributes on the same element.

Example-1: This will return only single value.

HTML

<!DOCTYPE html> 
<html> 
<style> 
    div { 
        width: 90%; 
        height: 60%; 
        padding: 20px; 
        border: 2px solid green; 
        font-weight: bold; 
    } 
      
    #ans { 
        background-color: lightgrey; 
        display: block; 
        width: 100px; 
        font-weight: bold; 
        height: 20px; 
        padding: 9px; 
        color: green; 
        float: right; 
        margin-top: -20px; 
    } 
      
    #res { 
        color: black; 
    } 
</style> 
  
<body> 
    <div> 
        <p id="p1"> 
          This is first paragraph 
        </p> 
  
  
        
        <p id="p2"> 
          This is second paragraph 
        </p> 
  
  
        
        <p id="p3"> 
          This is third paragraph 
        </p> 
  
  
        
        <p id="ans">Answer : <span id="res"></span></p> 
  
  
    </div> 
    <br> 
    
    <input type = button 
           onclick="myFunction()" value =  
           "Click Me.!" /> 
    <br> 
  
    <script> 
        function myFunction() { 
            var x = p1.compareDocumentPosition(p2); 
            document.getElementById("res").innerHTML = x; 
        } 
    </script> 
  
</body> 
  
</html> 

Output:
Before click on the Button:

After click on the button:

Example-2: This will return combination of two values.

HTML

<!DOCTYPE html> 
<html> 
<style> 
    div { 
        width: 90%; 
        height: 60%; 
        padding: 20px; 
        border: 2px solid green; 
        font-weight: bold; 
    } 
      
    #ans { 
        background-color: lightgrey; 
        display: block; 
        width: 100px; 
        font-weight: bold; 
        height: 20px; 
        padding: 9px; 
        color: green; 
        float: right; 
        margin-top: -20px; 
    } 
      
    #res { 
        color: black; 
    } 
</style> 
  
<body> 
    <div> 
        
        <p id="p1">This tutorial is on  
          <span id="p2"> 
             HTML | DOM compareDocumentPosition() Method 
          </span> on w3wiki.! 
        </p> 
  
  
        
        <p id="ans"> 
          Answer :  
          <span id="res"></span> 
        </p> 
  
  
        
    </div> 
    <br> 
    
    <input type=button onclick="myFunction()" 
           value="Click Me.!" /> 
    <br> 
  
    <script> 
        function myFunction() { 
            var x = p1.compareDocumentPosition(p2); 
            document.getElementById("res").innerHTML = x; 
        } 
    </script> 
  
</body> 
  
</html> 

Output:
Before Click on the Button:

After Click on the Button: Answer will be 20. ‘4’ means that first node is positioned before the second node and ’16’ second node is positioned inside the first node.

Note: The return value can be a combination of values. i.e. if the return value is 20 that means p2 is inside p1, ’16’ and p1 is positioned before p2 ‘4’.

Supported Browsers:

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 9 and above
Firefox 1 and above
Opera 12.1 and above
Safari 4 and above

HTML DOM compareDocumentPosition() Method

HTML

HTML

Contact Us