41

找出元素是否是另一个元素的后代的最佳方法还有另一个问题，与这个问题非常相似，但它的 jquery。

那么，我如何在 js 中做到这一点？我按此顺序嵌套了 div a、b、c、d。另外，不确定是否重要，还有另一个 a、b、c ......还有另一个。它不仅仅是一个元素。有许多相同的 id/class。

所以我想看看 d 是否有一个父级（无论它嵌套多深，只要顶部有一些父级就可以）称为 a。

编辑：另外，我有一个想法，我可以检查“a”的子节点并查看“d”是否是其中之一，但无法实现它。如果有人能让它工作，那就太棒了。

4

5 回答 5

106

您可以node.contains用来检查一个节点是否包含另一个节点。 https://developer.mozilla.org/en-US/docs/Web/API/Node.contains

于 2013-07-21T15:31:05.650 回答
31

如果你想使用纯 javascript 使用node.contains.

例如

var a = document.getElementById('a');
var d = document.getElementById('d')
if (a.contains(d)) {
    alert('d is a child of a');
}

小提琴：http: //jsfiddle.net/FlameTrap/pwVPC/

于 2013-07-21T15:33:41.743 回答
6 
// x is the element we are checking
while (x = x.parentNode) { 
    if (x.id == "a") console.log("FOUND");
}
于 2013-07-21T15:25:47.660 回答
5

在这种情况下，该方法closest()也可能有用。此方法返回与给定选择器（例如类或 id）匹配的元素的最近祖先元素。如果没有这样的元素，则该方法返回null。

let d = document.getElementById("d");
// if there is no ancestor with the id 'a', the method returns null and this evaluates to false:
if(d.closest("#a")){
   alert("d is a descendant of an element with the id 'a'");
}

您可以在MDN上找到更多描述和更多使用示例。

于 2019-01-24T07:55:34.357 回答
0

编辑：另外，我有一个想法，我可以检查“a”的子节点并查看“d”是否是其中之一，但无法实现它。如果有人能让它工作，那就太棒了。

对于每个祖先，调用 querySelector、querySelectorAll、getElementsByClassName 等。

let ancestors = document.querySelectorAll('ancestor a');
for(let i = 0; i < ancestors.length; i++){
    let a = ancestors[i];
    if(a.querySelector('descendant d')) {
        console.log(a);
    }
}

或者

let ancestors = document.querySelectorAll('ancestor a');
for(let i = 0; i < ancestors.length; i++){
    let a = ancestors[i];
    let descendants = a.querySelectorAll('descendant d');
    if(descendants.length > 0) {
        console.log(a);
    }
}
于 2021-10-05T06:12:26.080 回答