HTML getElementsByClassName返回长度为0的HTMLCollection

Question

我试图用来js document.getElementsByClassName定位一个html元素,它实际上是一个表的标题.

对于以下代码:

console.log(document.getElementsByClassName('gtableheader'));

从Firebug,我可以看到它登录a HTMLCollection,当我点击它时,它显示:

-> 0         tr.gtableheader
   length    1

所以它确实找到了我想要的元素.

但是当我使用时:

console.log(document.getElementsByClassName('gtableheader').length);

然后输出是0.那太奇怪了,有什么想法吗？

Answer 1

那是因为getElementsByClassName返回了一个实时收藏.length对象的属性是0因为在那个时间点,DOM中没有带有该className的元素.由于控制台显示对象的实时表示,因此当元素添加到DOM时,它会显示所有匹配的元素.

DOM解析器从上到下解析文档,当它到达标记时,它解析它并将它的DOM表示(HTMLElement接口的实例)添加到文档对象模型.您应该将脚本标记移动到标记的末尾,body或者监听DOMContentLoaded在完全加载和解析初始HTML文档时触发的事件.

Answer 2

使用getElementsByClassName()将在文档中将具有该类名的所有元素作为NodeList返回.此对象表示可以通过索引号访问的节点集合,从0开始.要访问NodeList中的元素,您必须使用循环.

当你console.log(document.getElementsByClassName('gtableheader').length); 看到0时,因为当你运行它时没有带类的元素gtableheader.您可以在控制台中查看项目,因为它document.getElementsByClassName()返回在添加新元素时更新的实时集合.

同样,在您使用的代码中,长度为0,您可以使用下面的代码访问类名.

document.getElementsByClassName('gtableheader')[0].style.color="red";

如果要访问类中的所有元素,可以使用for循环.

var x = document.getElementsByClassName('gtableheader');
for (var i = 0; i < x.length; i++) {
    x[i].style.color = "red";
}

更多信息:http: //www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Answer 3

使用它来使它工作

window.addEventListener("load", function(event) {
    console.log(document.getElementsByClassName('gtableheader').length);
});

Answer 4

我遇到了类似的问题，但这里的其他答案并没有导致我的解决方案。我最终意识到，在我的代码运行时，DOM 尚未完全构建，因此是空数组。我在控制台中看到的是一个填充数组，是 DOM 完全形成且脚本完成后存在的。

对我有用的是将需要数组的代码包装在 MutationObserver 中，并将其设置为监视包含将动态生成的部分的硬编码 div（请参阅此StackOverflow 答案和MDN 文档）。

尝试这个：

var divArray = document.getElementById('hardCodedContainer');

var observer = new MutationObserver(function(){
   console.log(document.getElementsByClassName('gtableheader').length);
   console.log(document.getElementsByClassName('gtableheader'));
};

observer.observe(divArray, { attributes: false, childList: true, subtree: true });

// When you've got what you need, you should call this function to trigger a disconnect 
function classesFound(){
   observer.disconnect();
};