爲什麼chrome throw'getAttribute'不是for循環中的函數錯誤？

Question

用下面的標記：

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

及以下的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 />'; 
} 

鉻投在控制檯以下錯誤：

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

我在IE 11和檢查本控制檯中沒有錯誤。奇怪的是，實際的result of the expression是正確的。

有誰知道爲什麼會發生這種情況？

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

要得到你需要做的[的DOMNode] ID .ID：

工作段：

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>

更新：

有#undefined: undefined顯示在上面的代碼片段的原因是

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

我們需要正確地遍歷所有匹配的元素使用這個對象的length財產。

工作片斷（控制檯通知我們，我們兩個屬性length，item通過在循環中，我們通過遍歷這些太多，但ID和innerHTML的是不確定的。）：

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

轉換var items這樣：

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

querySelectorAll沒有返回array但NodeList代替。

因爲你也使用IE也（不支持Array.from）。 這是最好先檢查一下，是這樣的：

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

使用代替for循環。 for in循環可以更好地處理像對象文字這樣的關鍵值對。您的數組式對象沒有繼承的枚舉屬性。

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

從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

不要使用for...in遍歷數組。

使用普通的for循環

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