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} );
}