<分区>
标签 javascript html css dom
<分区>
我有 3 个 div，第一个是 id，第二个是同一个类。我已经用 javascript 为这 3 个 div 编写了一个 EventListeners。我的第一个 div 的事件监听器与 ID 相关，但与 getElementsByClassName() 相关的第二个函数不起作用。这是我的代码
document.addEventListener("DOMContentLoaded", function() {
var firstElement = document.getElementById('firstOne');
firstOne.addEventListener('mouseout', function() {
this.style.backgroundColor = 'red';
this.style.border = '5px outset #00FF1E';
});
var secondElements = document.getElementsByClassName('secondOne');
secondElements.addEventListener('click', function() {
for (var i = 0; i < secondElements.length; i++) {
secondElements[i].style.backgroundColor = 'red';
}
});
});#firstOne {
height: 240px;
width: 240px;
border: 5px solid blue;
background-color: orange;
display: inline-block;
}
.secondOne {
height: 240px;
width: 240px;
border: 5px solid green;
background-color: skyblue;
display: inline-block;
}<div id="firstOne"></div>
<div class="secondOne"></div>
<div class="secondOne"></div>最佳答案
document.getElementsByClassName 返回一个 NodeList。因为你在做 secondElements.addEventListener，它会抛出一个错误
因为您不能将事件附加到 NodeList。您始终将事件附加到 Node。
要解决此问题，请使用 for 循环(或 .apply-forEach 组合，如果您愿意的话)遍历 NodeList 的元素，并且单独附加事件监听器。
document.getElementById 总是返回一个 Node(因为在 DOM 中只能有一个具有特定 id 的元素)所以 firstOne.addEventListener 有效。
代码示例:
var secondElements = document.getElementsByClassName('secondOne');
for(var i = 0, len = secondElements.length, elm; i < len; i++){
elm = secondElements[i];
elm.addEventListener('click', your_handler_function_here);
}
关于JavaScript DOM 问题。 (getElementsByClassName)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34262331/