我试图使用 js 的 document.getElementsByClassName 来定位一个 HTML 元素，实际上是一张表格的标题。
以下是代码:
console.log(document.getElementsByClassName('gtableheader'));
通过 Firebug，我可以看到它记录了一个 HTMLCollection，当我点击它时，它显示：
-> 0 tr.gtableheader
length 1
所以它确实定位到了我想要的元素。
但是当我使用以下代码时：
console.log(document.getElementsByClassName('gtableheader').length);
那么输出结果是0。这很奇怪，对此有什么想法吗？
getElementsByClassName 返回的是一个 活动的 集合，因此对象的 length 属性为 0，因为此时DOM中没有该类名的元素。由于控制台显示了对象的实时表示形式，因此当元素添加到DOM中时，它会显示所有匹配的元素。HTMLElement接口的实例）添加到文档对象模型中。您应该将脚本标签移动到 body 标签的末尾，或者侦听 DOMContentLoaded 事件，该事件在初始HTML文档完全加载和解析后触发。getElementsByClassName()，可以返回文档中所有具有该类名的元素作为一个NodeList。这个对象代表了一个可以通过索引号访问的节点集合，起始索引号为0。为了访问NodeList中的元素，您需要使用循环。console.log(document.getElementsByClassName('gtableheader').length);时，您会看到0，因为当您运行它时，没有具有类名gtableheader的元素。您能够在控制台中看到项目，是因为document.getElementsByClassName()返回一个实时更新的集合，该集合在添加新元素时更新。document.getElementsByClassName('gtableheader')[0].style.color="red";
var x = document.getElementsByClassName('gtableheader');
for (var i = 0; i < x.length; i++) {
x[i].style.color = "red";
}
getElementsByClassName返回的nodeList的length属性，然而你只是从你分配结果的变量x中读取了它。当我在这个页面上运行document.getElementsByClassName('question').length时，由于该类只有一个元素，结果为1。因此，你没有回答为什么OP的问题返回0的答案。 - Valelement没有style属性。虽然它可以工作，但IDE一直在抱怨它应该是HTMLElement。如何解决这个问题？ - Kokodokowindow.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();
};
只需将您的 <script> 标签放在 </body> 标签之前即可。
如果未在 <body> 标签末尾添加 <script> 标签，则可能导致DOM在此时尚未就绪，从而阻止JavaScript对其进行操作，从而导致未知行为
我遇到了一个问题，就是在动态创建元素后立即请求元素，但通过使用setTiemout()方法解决了这个问题。