[英]HTML getElementsByClassName returns HTMLCollection with length of 0
我正在尝试使用js document.getElementsByClassName来定位一个 html 元素，它实际上是一个表的 header 元素。
对于以下代码：
console.log(document.getElementsByClassName('gtableheader'));
从Firebug ，我可以看到它记录了一个HTMLCollection ，当我单击它时，它显示：
-> 0 tr.gtableheader
length 1
所以它确实找到了我想要的元素。
但是当我使用：
console.log(document.getElementsByClassName('gtableheader').length);
然后 output 为0 。 太奇怪了，有什么想法吗？
那是因为getElementsByClassName返回一个实时集合。 对象的length属性为0因为在那个时间点，DOM中没有带有该className的元素。 由于控制台显示对象的实时表示，因此当元素添加到DOM时，它会显示所有匹配的元素。
DOM解析器从上到下解析文档，当它到达标记时，它会解析它并将它的DOM表示（ HTMLElement接口的实例）添加到文档对象模型。 您应该将脚本标记移动到body标记的末尾，或者监听在完全加载和解析初始HTML文档时触发的DOMContentLoaded事件。
使用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
用它来使它工作
window.addEventListener("load", function(event) {
console.log(document.getElementsByClassName('gtableheader').length);
});
我有类似的问题，但其他答案并没有导致我的解决方案。 我最终意识到，在我的代码运行时，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();
};
您只需要在声明类的html代码之后调用js文件。
我有这个问题在动态创建之后要求元素，用 setTiemout() 修复
只需将<script>标签放在</body>之前
如果在<body>标签的末尾没有添加<script>标签，那么到那时 DOM 可能还没有准备好，从而阻止 javascript 对其进行处理，从而导致未知行为
为什么 document.getElementsByName 返回一个 NodeList 而 document.getElementsByClassName 返回一个 HTMLCollection？
[英]Why does document.getElementsByName return a NodeList while document.getElementsByClassName returns an HTMLCollection?
HTMLCollection的长度为8，但记录其任何索引是否返回未定义？
[英]HTMLCollection's length is 8 but logging any of its indices returns undefined?
即使使用 document.readyState || HTMLCollection 返回 0 作为长度在“DOMContentLoaded”之后
[英]HTMLCollection returns 0 as length even with document.readyState || after "DOMContentLoaded"
无法从getElementsByClassName访问HTMLCollection中的元素
[英]Unable to access elements in HTMLCollection from getElementsByClassName
HTMLcollection 0 列表长度，[n] 返回未定义，转换为数组返回空数组
[英]HTMLcollection 0 list length, [n] returns undefined, converting to an array returns an empty array
Javascript (HTMLCollection) 中的 object 长度不一致
[英]Inconsistent object length in Javascript (HTMLCollection)
从 getElementsByClassName 迭代 HTMLCollection 时的奇怪行为
[英]Strange behavior when iterating over HTMLCollection from getElementsByClassName
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.