为什么 forEach 不适用于儿童? [英] Why is forEach not working for children?

问题描述

我有一个

，里面有一些子

.例如

<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) {控制台日志(条目)；});

这是行不通的.我得到

TypeError: document.getElementById(...).children.forEach 不是函数

作为一种解决方法，我还尝试了一个更复杂的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]);}

按预期工作.

为什么?

解决方案

因为 .children 包含一个 HTMLCollection ^[MDN]，不是数组.HTMLCollection 对象是一个类数组 对象，它公开了一个 .length 属性并具有数字属性，就像like 数组，但它不是从 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);

I have a <div> with some child <div> in it. E.g.

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

I tried to loop through them with the forEach function, because I thought that document.getElementById("niceParent").children is an array, as I can access the elements with

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]);

Hence I tried

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

which is not working. I get

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

As a workaround I also tried it with a—much more complicated—for..in loop:

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

which worked as expected.

Why?

解决方案

Because .children contains an HTMLCollection ^[MDN], not an array. An HTMLCollection object is an array-like object, which exposes a .length property and has numeric properties, just like arrays, but it does not inherit from Array.prototype and thus is not an array.

You can convert it to an array using Array.prototype.slice:

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

---

ECMAScript 6 introduces a new API for converting iterators and array-like objects to real arrays: Array.from ^[MDN]. Use that if possible since it makes the intent much clearer.

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

这篇关于为什么 forEach 不适用于儿童?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！