Javascript返回一个空数组，但其中包含两个元素

Question

我很困惑。当我尝试获取像document.getElementsByClassName('html5gallery-tn-image-0')这样的元素时，我得到的是：

这些是我要搜索的元素，但数组表示它是空的。你能解释一下我为什么会这样，我可以达到这个阵列中的元素吗？提前谢谢！

Answer 1

你有几件事情可以解释这种行为：

1. 您正在执行false，此时文档中还没有此类元素。可能JavaScript在文档准备好之前执行。这解释了为什么console.log未定义。

2. temp[0]返回的HTMLCollection不是数组，并且有一些神奇的行为：它是 live 集合。因此，如果文档获得该类的其他元素，那么它会在getElementsByClassName集合中神奇地显示，而不会触及它！

3. 当您将对象记录到控制台时，Chrome开发工具将不会在此时收集所有对象属性，而是异步收集。这意味着虽然在记录时集合 为空，但是当您单击开发工具以查看集合中的内容时不再是这样。

请参阅此脚本中说明的前两点：

＆＃13;
＆＃13;
temp
＆＃13;
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
＆＃13;
＆＃13;
＆＃13;

解决方案

移动JavaScript代码，使其仅在文档完全加载时执行。之一：

• 将您的Javascript移至<div id="mydiv"></div>标记的末尾，或
• 将代码包装在body回调中。

Answer 2

在你的console.log中，它返回两个图像元素，因此它不是空的。

Answer 3

getElementsByClassName返回一个HTMLCollection，它有一些特殊属性。其中之一是，一旦DOM更新，那个类似数组的东西的内容就会得到更新。此外，在Chrome中，显示“[]”的部分会在您按下Enter键时立即计算，但只有在展开输出时才会评估内容（这两个元素）。