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.
<!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.
<!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 GeeksforGeeks.!
</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