使用getElementsByClassName似乎得到太多元素

運行以下代碼並按下按鈕應該登錄到控制檯窗口2個元素，元素與class="test1"，按鈕和p元素。而console.log(el.length)是2。但是，記錄到控制檯是這樣的：使用getElementsByClassName似乎得到太多元素

[p#div1.test1, 
button#btn.test1, 
div1: p#div1.test1, 
btn: button#btn.test1]

它看起來像4元素不2。

這裏發生了什麼？

<html> 
<body> 
<p class="test1" id="div1">test1</p> 
<button id="btn" onclick="getElements()" class="test1">Get Element List</button> 
<script> 
function getElements() 
{ 
    var txt = document.getElementById("div1").innerHTML; 

    var el = document.getElementsByClassName(txt); 
    if (el) { 
     console.log(el); 
     console.log(el.length); 
    } 
} 
</script> 
</body> 
</html>

來源

2015-10-06 Ron

你似乎對'console.log'的「常態」太興奮了。一切都非常好，並且應該如此。輸出是正確的。除了誤解日誌以外，這裏真正的問題是什麼？ – vsync

我的問題可能應該是：爲什麼在console.log（el）中有四個元素（即用逗號分隔）？ – Ron

ho，我不知道你不知道[** HTMLcollection **]（https://developer.mozilla.org/en/docs/Web/API/HTMLCollection）... – vsync

這是因爲它是返回的HTML集合，它是數組而不是數組。如果您將代碼更改爲

var el = document.getElementsByClassName(txt); 
if (el) { 
    console.log(Array.from(el)); 
    console.log(el.length); 
}

這會將集合轉換爲數組，您將看到僅包含2個項目的實數組。

[p#div1.test1, button#btn.test1] 
0: p#div1.test1 
1: button#btn.test1 
length: 2

一個HTML集合公開兩種方法

HTMLCollection.item() 
HTMLCollection.namedItem()

這就是爲什麼看起來它是雙項的數量，但事實並非如此。

來源

2015-10-06 18:16:34 baao

訣竅是，getElementsByClassName不返回數組，而是一個HTMLCollection。

HTMLCollection具有直接的信息是「按名稱和索引」的屬性，所以這就是爲什麼它看起來像它有4名成員。

來源

2015-10-06 18:16:18 syazdani

使用getElementsByClassName似乎得到太多元素

回答

相關問題