なぜforEachは子供のために働いていないのですか？

Question

私は<div>、子供には<div>をいくつか持っています。例えば。

私はこのため、私は

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

を試み

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関数でそれらをループに試み

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

は機能しません。

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

期待通りに働いていた：私は、私も、はるかにcomplicated- for..inループでそれを試してみました回避策として

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

を取得します。

なぜですか？

Answer 1

.childrenにはNodeList^[MDN]が含まれているため、配列は含まれていません。 NodeListオブジェクトだけアレイのような、.lengthプロパティを公開し、数値特性を有するアレイ状オブジェクトであり、それはArray.prototypeから継承しないので、アレイはありません。

あなたはArray.prototype.sliceを使用して配列に変換することができます：Array.from^[MDN]：

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

---

のECMAScript 6は、実際の配列にイテレータと配列のようなオブジェクトを変換するための新しいAPIが導入されました。可能であれば、意図をもっとはっきりさせるので、それを使用してください。

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

Answer 2

Element.childrenない配列です。それはNodeListと呼ばれるDOMオブジェクトです。これらには配列の関数はありません（ただし、配列にはlengthというプロパティがあります）。

それをループし

、あなたがArray.prototype.sliceを使用して行うことができ、配列、に変換する必要があります：

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

そして、この後：

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

Answer 3

また、これを行うことができますあなたのコレクションでforEachを呼び出すことができます：

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