How to use JavaScript Dom Node compareDocumentPosition

In this article I have described about Dom Node compareDocumentPosition() method in JavaScript
  • 2538

JavaScript Dom Node compareDocumentPosition() method

  • As we already know that node object is used to represent and add node within the HTML document.
  • The compareDocumentPosition() method compare two nodes and according to their position within document it return integer value.

Browser support

Following are the main browsers which support the compareDocumentPosition() method of Dom Node object

  • Internet Explorer.
  • Firefox.
  • Opera.
  • Google Chrome.
  • Safari.

NOTE - Internet Explorer 8 doesn't support this method.

Syntax

The compareDocumentPosition() of Dom Node object has following syntax

node.compareDocumentPosition(node)

Lets take an example

<!DOCTYPE html>

<html>

<body style ="background-color:YELLOW">

<p id="p1">WELCOME TO DOTNETHEAVEN</p>

<p id="p2">WELCOME TO JAVASCRIPT</p>

<p id="menu">COMPARE THE POSITION OF ABOVE PARAGRAPH</p>

<button onclick="myFunction()">COMPARE</button>

<script type="text/javascript">

    function myFunction() {

        var p1 = document.getElementById("p1").lastChild;

        var p2 = document.getElementById("p2").lastChild;

        var x = document.getElementById("menu");

        x.innerHTML = p1.compareDocumentPosition(p2);

    }

</script>

</body>

</html>

 

Output

 

DN CMPR1.jpg


When we click on button



DN CMPR2.jpg

 

Further Readings

You may also want to read these related articles :here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.