Checking if an Element is a Descendant of Another in JavaScript

Whether you're working with event handling, manipulating the DOM, or implementing specific behaviors based on the structure of your page, knowing how to check if an element is a descendant of another is a valuable skill.

In this article, we'll explore various methods and techniques to achieve this using JavaScript.

Method 1: "Node.contains()"

The Node.contains() method is a straightforward way to check if one element is a descendant of another.

This method returns a boolean value, indicating whether the specified node is a descendant of the node on which the method is called.

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');

if (parentElement.contains(childElement)) {
  console.log('Child is a descendant of the parent.');
} else {
  console.log('Child is not a descendant of the parent.');
}

This method is supported in modern browsers and provides a clean and concise way to perform the check.

Method 2: Traversing the DOM Tree

You can traverse the DOM tree manually by checking the parent chain of the element.

This involves iterating through the parent nodes until you reach the root (document), checking at each step if the current parent is the expected ancestor.

const isDescendant = (parent, child) => {
  let currentNode = child.parentNode;

  while (currentNode !== null) {
    if (currentNode === parent) {
      return true;
    }
    currentNode = currentNode.parentNode;
  }

  return false;
};

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');

if (isDescendant(parentElement, childElement)) {
  console.log('Child is a descendant of the parent.');
} else {
  console.log('Child is not a descendant of the parent.');
}

While this method works, it involves more manual steps and might be less efficient than using Node.contains().

Method 3: "Node.compareDocumentPosition()"

The Node.compareDocumentPosition() method compares the position of two nodes in the document.

If the result contains the Node.DOCUMENT_POSITION_CONTAINS bit, it means the first node is a descendant of the second node.

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');

const position = parentElement.compareDocumentPosition(childElement);

if (position & Node.DOCUMENT_POSITION_CONTAINS) {
  console.log('Child is a descendant of the parent.');
} else {
  console.log('Child is not a descendant of the parent.');
}

This method provides a more granular result and can be useful in certain scenarios, but it might be less commonly used compared to the previous methods.

Conclusion

Checking if an element is a descendant of another is a common task in web development. The choice of method depends on factors such as browser compatibility, simplicity, and the specific requirements of your project.

Whether you opt for the straightforward Node.contains() method, traverse the DOM manually, or use Node.compareDocumentPosition(), understanding these techniques allows you to efficiently handle the structure of your web page in JavaScript.