getElementsByClassName似乎不起作用

Question

我正在尝试使某些事件侦听器正常工作，但是由于某些原因，它们无法正常工作。

下面的两个事件块可以正常工作，但只有removes块可以一起工作。 如果我注释掉该块，则users块开始工作。 是什么导致这种情况发生？

var removes = document.getElementsByClassName("x");
for(var c in removes){
    removes[c].addEventListener("click", function(){
        console.log("Remove");
    }, false);
}

var users = document.getElementsByClassName("user");
for(var i in users){
    users[i].addEventListener("click", function(){
        console.log("Go");
    }, false);
}

这是HTML的示例：

<div class="user" data-id="123456">
    <div>
        <img id="avatar" src="http://example.com/photos/image.png" style="height: 50px;" alt="Avatar"/>
    </div>
    <div>
        <h3>My Username</h3>
        <p>example@example.com</p>
    </div>
    <div class="x" data-id="123456">&times;</div>
</div>

Answer 1

getElementsByClassName返回一个HTMLNodeList，它基本上是一个节点数组，而不是表单上的对象

{ "a": "b" }

因此，您不会在循环中使用...，而是将其用于

例如

for( var i = 0; i < removes.length; i++ ){
    removes[i].addEventListener( "click", function(){} );
}

Answer 2

for(var c in removes)

将返回HTMLNodeList的属性。

例如：

如果您运行for(var i in removes) { console.log(i)}您将获得

length 
item 
namedItem 

所以改用

for( var i = 0; i < removes.length; i++ ){
    removes[i].addEventListener( "click", function(){console.log("Remove");
    }, false} );
}