Javascript DOM issue. (getElementsByClassName)

本文关键字：getElementsByClassName issue DOM Javascript 更新时间：2023-09-26

我有3个div，第一个是id，第二个是同一个类。我已经为这3个div编写了一个带有javascript的EventListeners。我的第一个div的eventlistener与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);
}

getElementsByClassName（）返回具有所有给定类名的所有子元素的类似数组的对象。

使用for()循环，并添加click事件；

    var secondElements = document.getElementsByClassName('secondOne');
    for (var i=0;i<secondElements.length; i++) {
       secondElements[i].addEventListener('click',function(){
           for(var i = 0; i < secondElements.length ; i++){
              secondElements[i].style.backgroundColor = 'red';
            }
        });
     }

演示http://jsfiddle.net/yqec6aqs/

没有找到相关文章