Javascript 为什么js认为getElementByClassName生成的集合的长度为0，而不是0，特别是当console.loged

有一件事我真的需要理解，但在谷歌上找不到答案

在index.html DOM中，我有一个简单的div（我们称之为“indexDiv”）

我的项目文件中有另一个html文件（我们称之为non-index.html，包含由Word生成的非常长的html代码）

non-index.html中的html包含在3个具有相同类名的div中：“DivClassName”

使用js，我将non-index.html中的3个div附加到DOM的indexDiv中

在我的js代码中，我有以下

函数

function collection() {
    var myCollection= document.getElementsByClassName("DivClassName");// i.e., a collection of the 3 divs appended to the DOM from the non-index.html
    console.log(myCollection);
    console.log(myCollection.length);
    if (myCollection.length > 0) {
      console.log(myCollection);
    }
  }

第一个

console.log（myCollection）

打印长度为3的HTMLCollection，其中3个div具有相同的

className

第二个

console.log（myCollection.length）

紧跟在第一个之后，打印0

第三个

console.log（myCollection）

根本没有打印出来，这确认了

myCollection.length

不是>0

我无法理解这种行为。第一个console.log如何显示3个元素的集合（这是准确的，对应于DOM中具有相同类名的元素数），而javascript在执行任何后续代码时将同一集合视为0长度

如果有人能解释或指导我阅读解释这种行为的文档，我将非常感激

---

非常感谢。

myCollection我认为问题在于您从控制台读取的内容。让我们以这个修改后的示例为例：

函数集合（）{
var myCollection=document.getElementsByClassName（“DivClassName”）；
console.log（myCollection）；//HTMLCollection[…，…，…]
console.log（myCollection.length）；//3
如果（myCollection.length>0）{//true
console.log（myCollection）；//HTMLCollection[…，…，…]
}
}
集合（）；
var myCollection=document.getElementsByClassName（“DivClassName”）；
数组.from（myCollection）.forEach（函数（div）{
div.remove（）；
});
console.log（myCollection）；//HTMLCollection[]

对我来说很好。

.length

返回的是实际长度请仔细检查：与其描述代码，不如共享代码！使用浏览器的调试器而不是控制台。您看到的是live

节点列表在代码运行后被更新的结果。由于控制台能够显示实时更新，所以这就是你看到的。我打赌你正在运行
collection（）
在文档加载完成之前要确保脚本在文档加载后运行，您有两个选项。一个是将脚本放在文档底部，放在脚本运行之前需要存在的任何内容之后。另一个是将脚本放在函数中，并将其指定为文档或窗口loa的事件侦听器d事件（例如
document.onload=function（）{…}；
或
window.addEventListener（'load'，function（）{…}）；
）.的确如此。这是一个与我从控制台读到的内容在某种程度上具有误导性有关的问题。这个问题似乎可以通过将代码包装到document.body.onload事件触发的函数中来解决。非常感谢您的帮助。