Warum wirft "throw" getAttribute in einer For-Schleife keinen Funktionsfehler auf?

Question

Mit dem folgenden Markup:

<div id="parent"> 
    <div id="one">one</div> 
    <div id="two">two</div> 
    <div id="three">three</div> 
    <div id="four">four</div> 
    <div id="five">five</div> 
    <div id="six">six</div> 
</div> 

<p id="output"> 

</p> 

und der folgenden javascript:

var output = document.getElementById('output'); 
var items = document.querySelectorAll('#parent > div'); 

output.innerHTML += '#' + items[2].getAttribute('id') + '<br /><br />'; 

for(index in items){ 
     output.innerHTML += '#' + items[index].getAttribute('id') + ': '; 
     output.innerHTML += items[index].innerHTML + '<br />'; 
} 

Chrome den folgenden Fehler in der Konsole führt:

Uncaught TypeError: items[index].getAttribute is not a function

ich diese 11 in IE geprüft und Es gibt keine Fehler in der Konsole. Was seltsam ist, ist, dass die tatsächliche result of the expression korrekt ist.

Weiß jemand, warum das passiert?

var output = document.getElementById('output'); 
 
var items = document.querySelectorAll('#parent > div'); 
 

 
output.innerHTML += '#' + items[2].getAttribute('id') + '<br /><br />'; 
 

 
for(index in items){ 
 
\t \t output.innerHTML += '#' + items[index].getAttribute('id') + ': '; 
 
\t \t output.innerHTML += items[index].innerHTML + '<br />'; 
 
}

#output{ 
 
    color: blue; 
 
}

<div id="parent"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
    <div id="three">three</div> 
 
    <div id="four">four</div> 
 
    <div id="five">five</div> 
 
    <div id="six">six</div> 
 
</div> 
 

 
<p id="output"> 
 

 
</p>

Answer 1

Um id Sie [DOMNode] .id tun bekommen müssen:

Arbeits Snippet:

var output = document.getElementById('output'); 
 
var items = document.querySelectorAll('#parent > div'); 
 

 
output.innerHTML += '#' + items[2].id + '<br /><br />'; 
 

 
for (index in items) { 
 
    output.innerHTML += '#' + items[index].id + ': '; 
 
    output.innerHTML += items[index].innerHTML + '<br />'; 
 
}

<div id="parent"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
    <div id="three">three</div> 
 
    <div id="four">four</div> 
 
    <div id="five">five</div> 
 
    <div id="six">six</div> 
 
</div> 
 

 
<p id="output"> 
 

 
</p>

Update:

Der Grund, dass es #undefined: undefined in Snippet angezeigt wird, ist, dass

querySelectorAll() method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object

Wir brauchen length Eigenschaft dieses Objekts verwenden, um ordnungsgemäß eine Schleife durch alle Elemente abgestimmt.

Arbeits Schnipsel (Hinweis in der Konsole können wir uns zwei Eigenschaften length, item Durch die in Schleife wir durch diese zu durchlaufen, aber id und innerHTML- nicht definiert sind.):

var output = document.getElementById('output'); 
 
var items = document.querySelectorAll('#parent > div'); 
 

 
output.innerHTML += '#' + items[2].id + '<br /><br />'; 
 

 
for (var index = 0; index < items.length; index++) { 
 
    output.innerHTML += '#' + items[index].id + ': '; 
 
    output.innerHTML += items[index].innerHTML + '<br />'; 
 
} 
 

 
console.log(items);

<div id="parent"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
    <div id="three">three</div> 
 
    <div id="four">four</div> 
 
    <div id="five">five</div> 
 
    <div id="six">six</div> 
 
</div> 
 

 
<p id="output"> 
 

 
</p>

Answer 2

konvertieren var items dazu:

var items = Array.from(document.querySelectorAll('#parent > div')); 

querySelectorAll kehrt nicht array aber NodeList statt.

und weil Sie auch mit IE arbeiten (die Array.from nicht unterstützen). Es ist besser, es zuerst zu überprüfen, so etwas wie dieses:

if (!Array.from) { 
    //IE and else which do not support it 
    var items = document.querySelectorAll('#parent > div'); 
} else { 
    var items = Array.from(document.querySelectorAll('#parent > div')); 
} 

Array.from--Mozilla

Answer 3

Verwenden a for Schleife stattdessen. for in Schleifen funktionieren besser mit Schlüsselwertpaaren wie Objektliteralen. Ihr array-ähnliches Objekt hat keine aufgezählten Eigenschaften geerbt.

A for...in loop only iterates over enumerable properties.

von MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

var output = document.getElementById('output'); 
 
var items = document.querySelectorAll('#parent > div'); 
 

 
output.innerHTML += '#' + items[2].getAttribute('id') + '<br /><br />'; 
 

 
for (let index = 0; index < items.length; index++) { 
 
    output.innerHTML += '#' + items[index].getAttribute('id') + ': '; 
 
    output.innerHTML += items[index].innerHTML + '<br />'; 
 
}

#output { 
 
    color: blue; 
 
}

<div id="parent"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
    <div id="three">three</div> 
 
    <div id="four">four</div> 
 
    <div id="five">five</div> 
 
    <div id="six">six</div> 
 
</div> 
 

 
<p id="output"> 
 

 
</p>

Answer 4

Verwenden for...in nicht Arrays iterieren.

Verwenden Sie eine regelmäßige for-Schleife

for(var i = 0 ; i < items.length ; i++){ 
     output.innerHTML += '#' + items[i].getAttribute('id') + ': '; 
     output.innerHTML += items[i].innerHTML + '<br />'; 
}