关于JS中用classname获取元素改变样式时效果怪异的原因

        在编辑html页面时，我们有时候需要对很多个同一类名的元素进行更改样式，如更改点赞或收藏的样式，如果用classname来获取的话在操作时应该注意一下操作。

        如果按照这种方式添加监听器的话，在有很多个“dzz”的情况就会出现只能按顺序点击使dzz变黄或其他怪异情况，因为这些“dzz”公用一个classname，这种情况就会使在JS中定义的dzzElements变成一个数组，而不是一个元素，但如果是id获取的话就是一个元素。

 var dzzElements = document.getElementsByClassName("dzz");
dzzElements.addEventListener("click", function () {
                    this.style.color = "yellow"; 
                });

        下面是改进方法

var dzzElements = document.getElementsByClassName("dzz");
            // 对每个具有类名"dzz"的元素添加点击事件监听器
            for (var i = 0; i < dzzElements.length; i++) {
                dzzElements[i].addEventListener("click", function () {
                    this.style.color = "yellow"; // 使用this指向当前被点击的元素
                });
            }

通过遍历dzzElements中的每一个dzz并添加监听器就能按任意顺序触发监听器中的函数

以上就是一个小分享，觉得有用的话就点个赞吧