html - DOM 中的节点列表

Question

行。我正在尝试了解有关 DOM（文档对象模块）的更详细信息，但我似乎遇到了一些情况。

这是我的 HTML

<div class="parentDiv">
    <div>Child 1</div>
    <div>Child 2</div>
    <div>Child 3</div>
    <div>Child 4</div>
    <div>Child 5</div>
    <div>Child 6</div>
</div>

简单的。6 个子 div 嵌套在 parentDiv 中

现在我正在使用这个 Javascript 访问元素

var parent = document.getElementsByClassName("parentDiv");
for (var i = 0; i < parent.length; ++i) {
  var item = parent[i]; 
  console.log(item);
}

所以我运行我的程序，我希望控制台日志为我的 6 个 div 有 6 个条目。但是我只看到一个日志条目，这意味着我的循环有问题并且没有重复。

小提琴

我哪里错了。节点列表不是像数组吗？如果是，那么为什么我的循环不起作用？

编辑：检查此链接https://developer.mozilla.org/en-US/docs/Web/API/NodeList并滚动到Example。它说“可以循环遍历 NodeList 中的项目”。如何才能做到这一点

Answer 1

您将获得包含 class name 的所有元素"parentDiv"，这只是您的一个父项。您真正想要的是该父级中的所有 div。

var parents = document.getElementsByClassName("parentDiv");
for (var i = 0; i < parents.length; ++i) {
  var parent = parents[i]; 
  var children = parent.getElementsByTagName("div");
  for (var j = 0; j < children.length; ++j) {
    var item = children[i];
    console.log(item);
  }
}

Answer 2

<div>同班只有一个parentDiv。

更改您的 HTML：

<div class="parentDiv">
    <div class="childDiv">Child 1</div>
    <div class="childDiv">Child 2</div>
    <div class="childDiv">Child 3</div>
    <div class="childDiv">Child 4</div>
    <div class="childDiv">Child 5</div>
    <div class="childDiv">Child 6</div>
</div>

还有你的 JavaScript：

var parent = document.getElementsByClassName("childDiv");

for (var i = 0; i < parent.length; ++i) {
  var item = parent[i]; 
  console.log(item);
}

请注意getElementsByClassName某些较旧的浏览器不支持该功能。

编辑：

NodeList你试图迭代的只有一个元素。因此，您只会得到一个结果。要么从循环中深入挖掘 DOM，要么为子 DOM 元素利用类名。

我认为您不使用 jQuery 是有特定原因的？因为它很简单：

$('.parentDiv').children().each(function(){

    console.log(this);

});

Answer 3

要捕获 parentDiv 之后元素的节点列表，可以使用：

var parentNode = document.getElementsByClassName("parentDiv")[0];

var childNodesList = parentNode.getElementsByTagName( "div" );

它将获取 parentDiv 中的所有 div 元素。

希望有帮助。