Question

我遇到了问题，我希望编写一个脚本，可以显示内部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），以及最外面的父，我想要的东西。

Answer 1

试

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

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

1 个答案: