Javascript返回一個空數組，但其中包含兩個元素

Question

我有點困惑。 當我嘗試獲取諸如document.getElementsByClassName('html5gallery-tn-image-0')類的元素時，我得到的是：

這些是我要搜索的元素，但是數組說它是空的。 您能解釋一下為什么會這樣嗎，我能否理解此數組中的元素？ 先感謝您！

Answer 1

您正在進行的幾件事解釋了這種現象：

1. 您正在執行console.log時，文檔中尚無此類元素。 JavaScript可能會在文檔准備好之前執行。 這解釋了為什么temp[0]未定義。

2. getElementsByClassName返回的HTMLCollection不是數組，並且具有一些神奇的行為：它是一個實時集合。 因此，如果文檔獲得該類的其他元素，它將神奇地出現在該temp集合中，而無需您觸摸它！

3. 當您將對象登錄到控制台時，Chrome開發者工具此時將不會異步收集所有對象屬性。 這意味着盡管在記錄集合時該集合為空，但單擊開發工具以查看集合中的內容時不再是。

請參閱此腳本中說明的前兩點：

 var temp = document.getElementsByClassName('html5gallery-tn-image-0'); console.log(temp.length); // 0 // add the class to the element mydiv.className = "html5gallery-tn-image-0"; console.log(temp.length); // 1 

 <div id="mydiv"></div> 

解

移動您的JavaScript代碼，使其僅在文檔完全加載后才執行。 要么：

• 將您的Javascript移動到body標簽的末尾，或者
• 將代碼包裝在document.addEventListener('DOMContentLoaded', function () { ... }); 打回來。

Answer 2

在console.log中，它返回了兩個圖像元素，因此它不是空的。

Answer 3

getElementsByClassName返回一個HTMLCollection，它具有一些特殊屬性。 其中之一是，一旦DOM更新，類似數組的東西的內容就會更新。 另外，在Chrome中，顯示“ []”的部分會在您按Enter鍵后立即進行計算，但是內容（這兩個元素）只有在擴展輸出時才會得到評估。