HTML getElementsByClassName返回长度为0的HTMLCollection

HTML getElementsByClassName returns HTMLCollection with length of 0

本文关键字：HTMLCollection getElementsByClassName 返回 HTML      更新时间：2023-09-26

我正在尝试使用js document.getElementsByClassName来定位html元素，它实际上是表的表头。

对于以下代码：

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

从Firebug，我可以看到它记录了一个HTMLCollection，当我点击它时，它显示：

-> 0         tr.gtableheader
   length    1

所以它确实定位了我想要的元素。

但当我使用：

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

则输出为0。这太奇怪了，有什么想法吗？

这是因为getElementsByClassName返回实时集合。对象的CCD_ 7属性是CCD_。由于控制台显示对象的实时表示，因此当元素添加到DOM时，它会显示所有匹配的元素。

DOM解析器从上到下解析文档，当它到达一个标记时，它解析它，并将它的DOM表示（HTMLElement接口的实例）添加到文档对象模型中。您应该将script标记移动到body标记的末尾，或者侦听DOMContentLoaded事件，该事件在初始HTML文档完全加载和解析后激发。

使用此功能使其在中工作

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

使用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

我也遇到过类似的问题，但这里的其他答案并没有带来我的解决方案。我最终意识到，在我的代码运行时，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();
};

我在动态创建元素后就遇到了这个问题，用setTiemout（）解决了这个问题

只需将<script>标签放在</body> 之前

如果<script>标记没有添加到<body>标记的末尾，则DOM此时可能还没有准备好，从而阻止javascript对其进行操作，从而导致未知行为

相关文章：