为什么Chrome抛出'getAttribute'不是for循环内的函数错误？

Question

With the following 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>

and the following 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 throws the following error in the console:

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

I have checked this in IE 11 and there are no errors in the console. What's weird is that the actual result of the expression is correct.

Does anyone know why this is happening?

 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 />'; } 

 #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

Use a for loop instead. for in loops work better with key value pairs like object literals. Your array-like object does not have inherited enumerated properties.

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

from 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 2

convert var items to this:

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

querySelectorAll is not returning array but NodeList instead.

and because you work with IE also (which do not support Array.from). It is better to check it first, something like this:

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

To get id you need to do [DOMNode].id :

Working 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:

The reason that there are #undefined: undefined being displayed in above snippet is that

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

We need to use length property of this object to properly loop through all the matched elements.

Working snippet (Notice in console we can we two properties length , item . By for in loop we traversed through these too but id and innerHTML are undefined ):

 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 4

Do not use for...in to iterate over arrays.

Use a regular for loop

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