为什么forEach不为儿童工作？ [英] Why is forEach not working for children?

问题描述

我有一个< 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不是函数
  code> 

作为解决方法，我也尝试了一个更加复杂的方法 - for..in loop：

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $如果（document.getElementById（niceParent）。children [i] .nodeType == 1）console.log（document.getElementById（niceParent）。children [i]）;
}


符合预期。

为什么？

解决方案因为 .children 包含一个< a href =https://developer.mozilla.org/en-US/docs/DOM/NodeList =noreferrer> 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（... ）。儿童）; 
  

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 a NodeList ^[MDN], not an array. A NodeList 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屋！