Javascript HTML GetElementsByCassName返回长度为0的HTMLCollection

我试图使用

js

文档.getElementsByClassName

查找html元素，它实际上是表的标题

对于以下代码：

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

从

Firebug

，我可以看到它记录了一个

HTMLCollection

，当我单击它时，它显示：

-> 0         tr.gtableheader
   length    1

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

但当我使用：

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

---

然后输出为

0

。这太奇怪了，有什么想法吗？

使用

getElementsByClassName（）

将以节点列表的形式返回文档中具有该类名的所有元素。此对象表示可以通过索引号访问的节点集合，索引号从0开始。为了访问节点列表中的元素，必须使用循环

当您

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";
}

var x=document.getElementsByClassName（'gtableheader'）；
对于（变量i=0；i

更多信息：
这是因为
getElementsByCassName
返回一个实时集合。对象的
length
属性是
0
，因为此时DOM中没有具有该类名的元素。由于控制台显示对象的实时表示，因此在将元素添加到DOM时，它会显示所有匹配的元素

DOM解析器从上到下解析文档，当它到达一个标记时，它解析它并将它的DOM表示（一个
HTMLElement
interface的实例）添加到文档对象模型中。您应该将脚本标记移动到
body
标记的末尾，或者收听
DOMContentLoaded
事件，该事件在初始HTML文档完全加载和解析后激发。
使用此命令使其正常工作

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

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

对我来说，有效的方法是将需要数组的代码包装在MutationObserver中，并将其设置为监视包含动态生成的部分的硬编码div（请参见本文和）

试试这个：

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();
};

您只需要在声明类的html代码之后调用js文件。
我们可以看到您的html代码吗？您是在动态创建元素吗？您是在文档中的元素之后调用它吗，例如在加载事件之后？这可能的重复似乎无法回答问题。您还引用了
getElementsByClassName
返回的nodeList的length属性——您只需从分配结果的变量
x
中读取它。当我对这个页面运行
document.getElementsByClassName（'question'）.length时，结果是1，而这个页面只有一个元素与这个类在一起。因此，对于OP问题中的length属性返回0的原因，您没有提供答案。是的，实际上，真正的问题是，我试图在加载
元素之前访问
元素，这就是为什么长度为
0
。另一个问题是
元素
没有
样式
属性。它可以工作，但IDE一直抱怨它应该是
HTMLElement
。如何解决这个问题？谢谢，只是文档中的代码已经准备好了。但它在逻辑上很奇怪，var xyz=document.getElementsByClassName（'xyz'）；console.log（xyz）；console.log（xyz.length）；。我先赋值以获取组元素，然后读取变量的长度，但它仍然返回0。它是javascript…：）如何做到“这是因为GetElementsByCassName返回一个LIVE集合”应该使用h1标记字体编写。这是一个非常重要的事实。