如何将事件侦听器添加到html集合中的每个类？
如何将事件侦听器添加到html集合中的每个类？
提问于 2018-07-01 15:03:45
我尝试通过'element‘类获取所有元素，并为每个元素添加一个事件侦听器。但是，getElementsByClassName()返回的是html集合。当我使用.length()时，它等于零。如何遍历此集合以将事件侦听器添加到此类中的每个元素？有没有办法把这个html集合转换成数组呢？这是我到目前为止所知道的：
var tableElements = document.getElementsByClassName("element");
console.log(tableElements);
console.log(tableElements.length);
for(var i=0;i<tableElements.length;i++){
tableElements[i].addEventListener("click", dispElementData(this));
} //doesnt work回答 2
Stack Overflow用户
发布于 2018-07-01 16:31:13
您可以改用document.querySelectorAll(".element")。这将使用CSS选择器来查询dom (在本例中是“element”类)。
var tableElements = document.querySelectorAll(".element");
tableElements.forEach(function(element) {
element.addEventListener("click", function() {
dispElementData(this);
});
});Stack Overflow用户
发布于 2018-07-02 02:39:20
抱歉的!我上面的代码运行得很好！原来我的JS代码是在DOM加载完成之前执行的。谢谢你的帮助。解决方案是添加一个evt侦听器文档对象，然后在它完全加载后调用该函数：
document.addEventListener("DOMContentLoaded", function(){
var tableElements = document.getElementsByClassName("element");
for(var i=0;i<tableElements.length;i++){
tableElements[i].addEventListener("click", dispElementData(this));
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51121120
复制相关文章
相似问题