我正在尝试使用js
document.getElementsByClassName
来查找html元素,这实际上是表格的标题。
以下代码:
console.log(document.getElementsByClassName('gtableheader'));
从Firebug
,我可以看到它记录HTMLCollection
,当我点击它时,它会显示:
-> 0 tr.gtableheader
length 1
所以它找到了我想要的元素。
但是当我使用时:
console.log(document.getElementsByClassName('gtableheader').length);
然后输出为0
。这有点奇怪,有关于此的任何想法吗?
答案 0 :(得分:11)
这是因为getElementsByClassName
会返回 live 集合。对象的length
属性为0
,因为在那个时间点,DOM中没有该className的元素。由于控制台显示对象的实时表示,因此当元素添加到DOM时,它会显示所有匹配的元素。
DOM解析器从上到下解析文档,当它到达标记时,它会解析它并将其DOM表示(HTMLElement
接口的实例)添加到文档对象模型中。您应该将脚本标记移动到body
标记的末尾,或者监听在完整加载和解析初始HTML文档时触发的DOMContentLoaded
事件。
答案 1 :(得分:6)
使用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
答案 2 :(得分:0)
使用它使它工作
window.addEventListener("load", function(event) {
console.log(document.getElementsByClassName('gtableheader').length);
});
答案 3 :(得分:0)
我有一个类似的问题,但是这里的其他答案并没有导致我的解决方案。我最终意识到,在我的代码运行时,DOM尚未完全构建,因此为空数组。我在控制台中看到的是一个填充数组,它是在DOM完全形成并且脚本完成之后存在的。
对我有用的是将需要数组的代码包装到MutationObserver中,并将其设置为监视包含将动态生成的部分的硬编码div(请参阅此StackOverflow answer和{{3 }}。
尝试一下:
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();
};
答案 4 :(得分:0)
您只需要在声明类的html代码之后调用js文件。