How to check in Javascript if one element is contained within another

user_243837 0
Viewed 220163

How can I check if one DOM element is a child of another DOM element? Are there any built in methods for this? For example, something like:

if (element1.hasDescendant(element2))

or

if (element2.hasParent(element1))

If not then any ideas how to do this? It also needs to be cross browser. I should also mention that the child could be nested many levels below the parent.

dom javascript
10 Answers

Update: There's now a native way to achieve this. Node.contains(). Mentioned in comment and below answers as well.

Old answer:

Using the parentNode property should work. It's also pretty safe from a cross-browser standpoint. If the relationship is known to be one level deep, you could check it simply:

if (element2.parentNode == element1) { ... }

If the the child can be nested arbitrarily deep inside the parent, you could use a function similar to the following to test for the relationship:

function isDescendant(parent, child) {
     var node = child.parentNode;
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}
user_1663390

Consider using closest('.selector')

It returns null if neither element nor any of its ancestors matches the selector. Alternatively returns the element which was found

user_181592640

try this one: 

x = document.getElementById("td35");
if (x.childElementCount > 0) {
    x = document.getElementById("LastRow");
    x.style.display = "block";
}
else {
    x = document.getElementById("LastRow");
    x.style.display = "none";
}
user_36750720

TL;DR: a library

I advise using something like dom-helpers, written by the react team as a regular JS lib.

In their contains implementation you will see a Node#contains based implementation with a Node#compareDocumentPosition fallback.

Support for very old browsers e.g. IE <9 would not be given, which I find acceptable.

This answer incorporates the above ones, however I would advise against looping yourself.

user_35802610
Related