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访问elemts

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

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

FIDDLE

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

编辑选中此链接https://developer.mozilla.org/en-US/docs/Web/API/NodeList并滚动至示例。它说“可以遍历NodeList 中的项目”。怎么做呢

Answer 1

您将获得包含类名"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 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元素。

希望有所帮助。

DOM中的节点列表

3 个答案: