如何遍历DOM以锁定元素？
如何遍历DOM以锁定元素？
提问于 2021-08-02 22:14:26
parentElement方法从子元素返回父元素。
例如document.querySelector('span').parentElement
编辑:我想找到DIV元素，使用它的一个子程序，grand 或grand‘s等等.
<div>
<p>
<strong>
<span></span>
</strong>
</p>
</div>
<label></label>
<button></button>预期产出：
p是div的孩子
strong是div的孙子
span是div的孙子
label不是div的孩子
button不是div的孩子
编辑:如何使用其嵌套元素之一找到DIV？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-08-02 22:20:40
可以使用 childNodes 获取DIV元素的childNodes。
// document.querySelector will get the FIRST occurence of a DIV element in the DOM.
document.querySelector('div').childNodes.forEach(node => {
if(node.tagName){
console.log(`${node.tagName} is a child of ${document.querySelector('div').tagName}`)
}
})<div>
<p>
<strong>
<span></span>
</strong>
</p>
<section>
<img src="#">
</section>
<div>
<strong>
<span></span>
</strong>
</div>
</div>
我认为您可能希望让div元素遍历父元素、父元素、父元素等，直到您到达相对于SPAN标记=>的DIV为止，您可以使用closest()。
document.querySelector('SPAN').closest('DIV')
console.log(document.querySelector('SPAN').tagName + '\'s closest DIV up the DOM chain of elements is, DIV with id of ' + document.querySelector('SPAN').closest('DIV').id)<div id="top-level-div">
<p>
<strong>
<span></span>
</strong>
</p>
</div>
Stack Overflow用户
发布于 2021-08-02 22:55:56
<strong>和<span>元素不是嵌套在其中的<div>的子元素，它们是孙辈。
尽管如此，通过使用以下方法，您可以在示例中找到div元素的所有子代和子代：
document.querySelector("span").closest("div").getElementsByTagName("*")然后，可以将生成的HTMLCollection转换为如下所示的数组：
const childEls = Array.from(document.querySelector("span").closest("div").getElementsByTagName("*"));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68628460
复制相关文章
相似问题
腾讯云开发者
