如何在普通 JavaScript 中获取内部子节点的最外层父节点

我遇到了一个问题，我希望编写一个可以显示内部div的所有div id的脚本，例如：

<body id="bd">
<div id="canvas">
    <div id="nd1">
        <div>
            My text
        </div>
    </div>
    <div id="nd2">
        <div id="hd">Some Text</div>
    <div>
<div>

我想要的是假设当我单击在"nd1"中没有定义 ID 的div 时，我应该得到它的父div（即 nd1）和最外层的父级，这是我想要的。

试试

var allChildNodes = document.querySelectorAll("#nd1 div");
nodes = Array.prototype.slice.call(allChildNodes ,0); 
nodes.forEach(function(node){ 
   node.addEventListener("click", function(){
     console.log("Outer parent" + node.parentNode.outerHTML);
     console.log("Outermost parent" + node.parentNode.parentNode.outerHTML);
   });
});

获取父div 的数组

var allChildNodes = document.querySelectorAll("#nd1 div");
nodes = Array.prototype.slice.call(allChildNodes ,0); 
nodes.forEach(function(node){ 
   node.addEventListener("click", function(){
     var parentDivs = [];
     while( !node.parentNode )
     {
        parentDivs.push(node.parentNode);
        node = node.parentNode;
     }
     console.log("parents" + parentDivs);
   });
});

用于匹配从特定字符串开始的多个div

var allChildNodes = document.querySelectorAll("[id^='nd'] div");

相关内容

最新更新

热门标签：