如何获取孩子的数据javascript

Question

有人可以解释一下我做错了什么吗？

 let toolbarForChilds = document.getElementById("toolbar"); for (let i = 0; i < toolbarForChilds.childNodes.length; i++) { toolbarForChilds.childNodes[i].style.cursor = "default"; }

 <div class="sample-toolbar" id="toolbar" style="text-align: center;"> <div id="title">#1</div> <div id="another thing">#2</div> </div>

我在控制台中收到此错误：

Uncaught TypeError: Cannot set property 'cursor' of undefined

Answer 1

Node.childNodes

childNodes包括所有子节点——包括非元素节点，如文本和注释节点。 要获取仅包含元素的集合，请改用ParentNode.children 。

您不需要使用childNodes 。 您可以使用querySelectorAll()定位所有元素并按以下方式循环遍历它们：

 let toolbarForChilds = document.querySelectorAll("#toolbar div"); for (let i = 0; i < toolbarForChilds.length; i++) { toolbarForChilds[i].style.cursor = "default"; }

 <div class="sample-toolbar" id="toolbar" style ="text-align: center;"> <div id ="title">#1</div> <div id ="another thing">#2</div> </div>

Answer 2

这里的问题是 childNodes 不仅返回元素。 也有没有样式属性的节点。 例如在 html 标签之间有空文本节点。 如果您添加console.log(toolbarForChilds.childNodes[i]);您应该在浏览器控制台中看到这一点console.log(toolbarForChilds.childNodes[i]); 在 for 循环内。

Answer 3

您的代码不起作用的原因是 childNodes 还包含元素之间的换行符。 您可以通过console.log childNodes 以查看它们。 如果您将其包装在 try-catch 中以跳过这些代码，您的代码将起作用，尽管您应该遵循 Mamun 的答案以获得更简洁的方法。

for (let i = 0; i < toolbarForChilds.childNodes.length; i++) {
    try {
      toolbarForChilds.childNodes[i].style.cursor = "default";
    }
    catch {
        continue;
    }
}

Answer 4

node.childNodes返回没有样式属性的元素，如文本节点。 仅获取节点元素，即 div 的： id ="title" & id ="another thing"使用node.children 。 这在下面实现。

 let toolbarForChilds= document.getElementById("toolbar"); /* console.log(toolbarForChilds.childNodes); */ for (let i = 0; i < toolbarForChilds.children.length; i++) { toolbarForChilds.children[i].style.cursor = "help"; }

 <div class="sample-toolbar" id="toolbar" style ="text-align: center;"> <div id ="title">#1</div> <div id ="another thing">#2</div> </div>