检查HTML元素是否有特定的孙元素

Question

如何检查元素是否是特定元素的孙子？我想我们可以在获取其所有子元素后，对祖父母元素上的使用contains方法？

let grandparent = document.getElementById("grandparent");
let childs = document.getElementsByClassName("child")
for(let i = 0; i < childs.length; i++) {
let test = grandparent.getElementsByTagName("*")
if (test.contains(childs[i])) { 
console.log(true) 
} else {
console.log(false)
}
}

<div id="grandparent">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>

Answer 1

您可以使用parentElement:

let grandparent = document.getElementById("grandparent");
let childs = document.getElementsByClassName("child")
for(let i = 0; i < childs.length; i++) {
if (childs[i].parentElement.parentElement === grandparent) { 
console.log(true) 
} else {
console.log(false)
}
}

<div id="grandparent">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>

Answer 2

如果您想要所有的.child元素，您可以使用.closest('#grandparent');或从父级获得let child = document.querySelector('#grandparent #parent .child');或querySelectorAll这样的选择器吗

或者您可以使用parentElement或parentNode属性？

Answer 3

您可以将父节点与循环进行比较

let grandparent = document.getElementById("grandparent");
let childs = document.getElementsByClassName("child")
for (let i = 0; i < childs.length; i++) {
let p = childs[i];
let found = false;
// iterate until a prent element same as grandparent 
// or until it reaching the root element
while (p = p.parentNode) {
// if found set found as true and break the loop
if (p === grandparent) {
found = true;
break
}
}

if (found) {
console.log(true)
} else {
console.log(false)
}
}

<div id="grandparent">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>