HTML - DOM Element compareDocumentPosition() Method

Quiz

The HTML DOM Element compareDocumentPosition() method is used to understand the document structure by comparing the positions of two DOM elements (nodes) and returns a bitmask.

A bitmask is a numeric value representing the position of the first element relative to the second element.

Syntax

Following is the syntax of the HTML DOM Element compareDocumentPosition() method −

node.compareDocumentPosition(otherNode);

Parameters

This method accepts a single parameter as listed below −

Method	Description
otherNode	The other DOM node to compare against the original node.

Return Value

A bitmask indicating the positional relationship between the two DOM nodes. It's values and their meanings are as follows:

Relation	Values & Description
Different Docs	1 Nodes belong to different documents
After	2 First node comes after the second
Before	4 First node comes before the second
Inside (1st)	8 First node is inside the second
Inside (2nd)	16 Second node is inside the first
Same Attributes	32 Nodes are attributes on the same element

Example 1: Comparing Elements in a Document

The following program demonstrates the usage of the HTML DOM Element compareDocumentPosition() by comparing two elements within the same document −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element compareDocumentPosition()</title>
<style> 
   .element {
       border: 1px solid #ccc; 
       margin-bottom: 10px;
   }
   .relation {
       font-style: italic;
   }
</style>
</head>
<body>
<h3>HTML DOM Element compareDocumentPosition() method</h3>
<div class="element" id="element1">Element 1</div>
<div class="element" id="element2">Element 2</div>
<div class="relation" id="relation"></div>
<button onclick="compareElements()">Compare Elements</button>
<script>
   function compareElements() {
      var element1 = document.getElementById('element1');
      var element2 = document.getElementById('element2');
      var relation = document.getElementById('relation');
      var position = element1.compareDocumentPosition(element2);
      if (position & Node.DOCUMENT_POSITION_PRECEDING){
          relation.textContent = 'Element 1 precedes Element 2.';
      } else if
      (position & Node.DOCUMENT_POSITION_FOLLOWING){
          relation.textContent = 'Element 1 follows Element 2.';
      } else if 
      (position & Node.DOCUMENT_POSITION_CONTAINS) {
          relation.textContent = 'Element 1 contains Element 2.';
      } else if 
      (position & Node.DOCUMENT_POSITION_CONTAINED_BY){
          relation.textContent = 'Element 1 is contained by Element 2.';
      } else if (position === 0) {
          relation.textContent = 'Element 1 and Element 2 are same.';
      } else {
          relation.textContent = 'Unknown relationship.';
      }
   }
</script>
</body>
</html>

The above program displays "Element 1 follows Element 2.", which means both the element having same document position.

Example 2: Comparing Element with it's Descendant

Here is another example of the HTML DOM Element compareDocumentPosition(). We compare the parent element with its child (descendant) element using this method −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   .container {
       border: 1px solid #ccc;
       padding: 10px;
       margin-bottom: 10px;
   }
   .descendant {
       border: 1px solid #f0f0f0;
       padding: 8px;
       margin-left: 20px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element compareDocumentPosition() Method</h3>
<p>Compare Element with Descendant Example</p>
<div class="container" id="parentElement">
   Parent Element
   <div class="descendant" id="descendantElement">
   Descendant Element
   </div>
</div>
<p id="relation"></p>
<button onclick="cmprWithDescendant()">Compare with Descendant</button>
<script>
   function cmprWithDescendant() {
      var parentElement = document.getElementById('parentElement');
      var descendantElement = 
	  document.getElementById('descendantElement');
      var relation = document.getElementById('relation');
      var position = 
	  parentElement.compareDocumentPosition(descendantElement);
      if (position & Node.DOCUMENT_POSITION_CONTAINS){
          relation.textContent = 
		  'Parent contained by Descendant Element.';
      } 
      else if (position&Node.DOCUMENT_POSITION_CONTAINED_BY){
          relation.textContent = 
		  'Descendant contained by Parent Element.';
      } else {
          relation.textContent = 'No direct containment.';
      }
   }
</script>
</body>
</html>

When the button clicks, it displays "Descendant contained by Parent Element" which means the the parent contains the specified element.

Example 3: Comparing Two Disconnected Elements

This example shows how to handle the case when two elements are compared but do not have any meaningful document relationship −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element compareDocumentPosition()</title>
<style>
   body {
       font-family: Arial, sans-serif;
       margin: 20px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element compareDocumentPosition() Method</h3>
<div id="myElement" class="example" title="An example element"></div>
<button id="checkButton">Check Attributes</button>
<p id="result"></p>
<script>
   document.getElementById('checkButton').addEventListener('click', 
   function() {
      // Get the element
      let element = document.getElementById('myElement');
      // Get the attributes
      let attrClass = element.getAttributeNode('class');
      let attrTitle = element.getAttributeNode('title');
      // Compare the document positions
      let comparisonResult = attrClass.compareDocumentPosition(attrTitle);
      // Check if the nodes are attributes 
      //of the same element
      let resultText;
      if (comparisonResult & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC){
         resultText = 'Attributes are on the same element';
      } else {
         resultText = 'Attributes are not on the same element';
      }
      // Display the result in the paragraph element
      document.getElementById('result').innerText = resultText;
      });
</script>
</body>
</html>

Supported Browsers

Method
compareDocumentPosition()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page