JavaScriptDOM问题。（getElementsByClassName）

我有3个div，第一个是id，第二个是同一个类。我已经用javascript为这3个div编写了一个EventListeners。我的第一个div的eventlistener与ID相关，但与getElementsByCassName（）相关的第二个函数不起作用。这是我的密码

document.addEventListener（“DOMContentLoaded”，function（））{
var firstElement=document.getElementById（'firstOne'）；
addEventListener（'mouseout'，function（）{
this.style.backgroundColor='red'；
this.style.border='5px开始#00FF1E'；
});
var secondElements=document.getElementsByClassName（'secondOne'）；
secondElements.addEventListener（'click'，function（）{
对于（var i=0；i
#第一个{
高度：240px；
宽度：240px；
边框：5px纯蓝色；
背景颜色：橙色；
显示：内联块；
}
.第二个{
高度：240px；
宽度：240px；
边框：5px纯绿色；
背景色：天蓝色；
显示：内联块；
}
文档。GetElementsByCassName
返回一个
节点列表
。由于您正在执行
secondElements.addEventListener
，因此它将抛出一个错误
因为您无法将事件附加到
节点列表
。您总是将事件附加到
节点

要解决此问题，请使用for循环（或
）在
NodeList
的元素上循环。如果您对此感到满意，请应用forEach
组合），并单独附加事件侦听器

document.getElementById
总是返回一个
节点
（因为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);
}

var secondElements=document.getElementsByClassName（'secondOne'）；
for（var i=0，len=secondElements.length，elm；i
GetElementsByCassName（）返回具有所有给定类名的所有子元素的类似数组的对象

使用
for（）
循环它，并添加
单击
事件

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

var secondElements=document.getElementsByClassName（'secondOne'）；
对于（var i=0；iOkay，我理解。因此无法使用GetElementsByCassName（）将样式应用于多个元素？那么querySelector（）方法呢？如果我使用值为document.querySelector（'.secondOne'）.addEventListener（'click'，function（）{..}）的变量；它会工作吗？
文档。querySelector
只返回一个
节点，因此它会工作。但请记住，它只会获取匹配元素的第一个外观。该方法将丢失其他匹配节点。正如我所说的，如果要使用
GetElementsByCassName
，则可以在单个元素上循环节点列表返回的元素，然后手动将侦听器附加到每个元素。这意味着如果我有两个具有相同类的div，并且使用querySelector，将只捕获第一个div？另一个问题是，如果我使用querySelector（）方法，我是否可以像querySelector（'items'）那样在内部编写函数。addEventListener（'click'，function（）{..}）或者，我必须在这个函数之外定义函数，并且只能按名称使用它，比如querySelector（'items'）。addEventListener（'click'，changeColor）；@Nasco.Chachev是。我会给你一个代码示例。等等。@Nasco.Chachev请参阅更新的答案