javascript - HTML getElementsByClassName 返回长度为 0 的 HTMLCollection

Question

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

对于以下代码:

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

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

-> 0         tr.gtableheader
   length    1

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

但是当我使用时:

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

然后输出为0。这太奇怪了，对此有什么想法吗？

Answer 1

那是因为 getElementsByClassName 返回一个事件 集合。对象的 length 属性为 0，因为此时 DOM 中没有具有该类名的元素。由于控制台显示对象的实时表示，因此当元素添加到 DOM 时，它会显示所有匹配的元素。

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