如何为 html 集合中的每个类添加事件监听器？

Question

我试图通过“元素”类获取所有元素，并向每个元素添加一个事件侦听器。然而，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

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

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

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