如何检查一个DOM元素是否是另一个DOM元素的子元素?有什么内置的方法吗?例如,像这样:

if (element1.hasDescendant(element2)) 

or

if (element2.hasParent(element1)) 

如果没有,有什么想法如何做到这一点?它还需要跨浏览器。我还应该提到,子对象可以嵌套在父对象的许多层之下。


当前回答

考虑使用nearest ('.selector')

如果元素和它的任何祖先都不匹配选择器,则返回null。或者返回找到的元素

其他回答

更新:现在有一个本地的方式来实现这一点。Node.contains()。在评论和下面的回答中也提到了。

旧的回答:

使用parentNode属性应该可以工作。从跨浏览器的角度来看,它也相当安全。如果你知道这段关系有一个层次的深度,你可以简单地检查它:

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

如果子对象可以嵌套在父对象的任意深处,你可以使用类似于下面的函数来测试这种关系:

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

考虑使用nearest ('.selector')

如果元素和它的任何祖先都不匹配选择器,则返回null。或者返回找到的元素

您可以使用contains方法

Var result = parent.contains(child);

或者你可以尝试使用compareDocumentPosition()

var result = nodeA.compareDocumentPosition(nodeB);

最后一个更强大:它返回一个位掩码作为结果。

另一个没有提到的解决方案:

例子

var parent = document.querySelector('.parent');

if (parent.querySelector('.child') !== null) {
    // .. it's a child
}

元素是否为直接子元素并不重要,它在任何深度都可以工作。


或者,使用.contains()方法:

例子

var parent = document.querySelector('.parent'),
    child = document.querySelector('.child');

if (parent.contains(child)) {
    // .. it's a child
}

试试这个:

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";
}