为什么获取到的HTML Collection的length属性返回值为0？

问题原因 #

你遇到的问题由两个常见错误导致：

• getElementsByClassName方法传入的参数仅需要填写类名本身，不需要额外加CSS选择器的.前缀，你当前传入的.listItem会被识别为类名包含.的元素，自然找不到对应的DOM节点，返回的HTML Collection长度为0。
• 若你的JS代码放在<head>标签内，或者在DOM节点渲染完成前就执行，此时页面还没有加载出.listItem对应的节点，也会导致获取到的集合为空。

修正方案 #

1. 修正类名参数 #

将JS代码中getElementsByClassName的入参去掉.前缀，修改为：

var todolist = document.getElementsByClassName('listItem');

2. 调整代码执行时机 #

两种方案二选一即可：

• 把你的JS代码整体放到</body>标签的前面，确保所有DOM节点加载完成后再执行JS逻辑
• 给代码加DOMContentLoaded事件监听，等DOM渲染完毕后再执行查询逻辑，修改后的完整JS代码如下：

document.addEventListener('DOMContentLoaded', function() {
    crossAdder()
})

function crossAdder() {
    var todolist = document.getElementsByClassName('listItem');
    console.log(todolist.length); // 此时会正确输出5
}

内容的提问来源于stack exchange，提问作者Vatsal A Mehta