Nodelist in 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>

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

现在我正在使用这个Javascript 访问elemts

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

因此，我运行了我的程序，我希望控制台日志中有6个条目用于我的6个div。然而，我只看到一个日志条目，这意味着我的循环有问题，不会重复。

FIDDLE

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

编辑：检查此链接https://developer.mozilla.org/en-US/docs/Web/API/NodeList并滚动到示例。它说"可以循环节点列表中的项目"。如何做到这一点

Answer 1

只有一个<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 2

您得到的所有元素都包含类名"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 3

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

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

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

希望能有所帮助。