Question

我试图通过'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

Answer 1

对不起！我上面的代码工作正常！原来我的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)); 
              }
})

Answer 2

您可以改用document.querySelectorAll(".element")。这将使用CSS选择器查询dom（在本例中为“ element”类）。

var tableElements = document.querySelectorAll(".element");

tableElements.forEach(function(element) {
    element.addEventListener("click", function() {
        dispElementData(this);
    });
});

如何将事件侦听器添加到html集合中的每个类？

2 个答案: