Dlaczego NIE DZIAŁA WSZYSTKIEGO DLA DZIECI?

Question

Mam <div> z pewnym dzieckiem <div> w nim. Na przykład.

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

że próbował pętli nich funkcji forEach, ponieważ uważał, że document.getElementById("niceParent").children jest tablica, jak można uzyskać dostęp do elementów z

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

Stąd że próbował

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

która nie działa. I dostać

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

Jako obejście ja też próbuje go o wiele bardziej complicated--for..in pętli:

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

który pracował zgodnie z oczekiwaniami.

Dlaczego?

Answer 1

Ponieważ .children zawiera NodeList^[MDN], a nie tablicę. NodeList przedmiot jest tablicowej obiekt, który ujawnia właściwości .length i ma wartości numeryczne, tak jakbymacierzy, ale nie dziedziczyć Array.prototype, a zatem nie jest tablicą.

można przekonwertować go na tablicy przy użyciu Array.prototype.slice:

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

---

ECMAScript 6 wprowadza nowe API do konwersji iteratory i obiektów tablicy podobny do prawdziwych tablic: Array.from^[MDN]. Użyj tego, jeśli to możliwe, ponieważ sprawia, że ​​intencje są znacznie wyraźniejsze.

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

Answer 2

Element.children jest nie tablicą. Jest to obiekt DOM o nazwie NodeList. Nie mają funkcji tablicy (chociaż mają właściwość length).

pętli niego, trzeba przekonwertować go do tablicy, co można zrobić przy użyciu Array.prototype.slice:

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

A potem:

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

Answer 3

Można też to zrobić możesz zadzwonić do nas na swoją kolekcję:

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