为什么不的forEach工作的孩子？(Why is forEach not working for

我有一个<div>一些孩子<div>在里面。 例如

<div id="niceParent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

我通过他们试图环与所述forEach功能，因为我认为document.getElementById("niceParent").children是一个数组，我可以访问与该元件

console.log(document.getElementById("niceParent").children[1]);
console.log(document.getElementById("niceParent").children[2]);
console.log(document.getElementById("niceParent").children[3]);
console.log(document.getElementById("niceParent").children[4]);

因此，我试着

document.getElementById("niceParent").children.forEach(function(entry) {
  console.log(entry);
});

这是行不通的。 我得到

TypeError: document.getElementById(...).children.forEach is not a function

作为一种解决办法我也有，更complicated-尝试过for..in循环：

for (var i in document.getElementById("niceParent").children) {
  if (document.getElementById("niceParent").children[i].nodeType == 1) console.log(document.getElementById("niceParent").children[i]);
}

它的工作如预期。

为什么？

Answer 1:

因为.children包含一个NodeList ^{[MDN] ，}而不是阵列。 甲NodeList对象是一个数组状物体，它公开了一个.length属性并且具有数值属性， 就像阵列，但它不从继承Array.prototype并且因此不是数组。

你可以将其转换为使用数组Array.prototype.slice ：

var children = [].slice.call(document.getElementById(...).children);

---

的ECMAScript 6引入了一个新的API迭代器和阵列状物体转换成真实数组： Array.from ^{[MDN] 。} 使用，如果可能的，因为它使意图更加清晰。

var children = Array.from(document.getElementById(...).children);

Answer 2:

Element.children 不是数组。 它被称为对象HTMLCollection 。 这些没有一个阵列的方法（虽然他们确实有length属性）。

通过它循环，你必须把它转换成一个数组，你可以用做Array.prototype.slice ：

var children = Array.prototype.slice.call(document.getElementById("niceParent").children);

children.forEach(…);

Answer 3:

你也可以这样做：

NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach;

在这之后，你可以调用foreach所您的收藏：

document.getElementById("niceParent").children.forEach(...)

最好的和最安全的办法就是真正当它不存在，只添加的forEach的情况：

if (window.NodeList && !NodeList.prototype.forEach) {
   NodeList.prototype.forEach = Array.prototype.forEach;
}
if (window.HTMLCollection && !HTMLCollection.prototype.forEach) {
   HTMLCollection.prototype.forEach = Array.prototype.forEach;
}

Answer 4:

一个更清洁，更现代的方式一个转换HTMLCollection像.children到阵列使用forEach()或map()等）是使用传播synthax ...在阵列[]

var children = [...document.getElementById('x').children)];

例如：

[...document.getElementById('x').children)].forEach(child => console.log(child))

这是一个ES6功能。 它会在所有现代浏览器。

文章来源: Why is forEach not working for children?