JavaScript中使用getElementByClassName遇TypeError报错求助

报错原因 #

• document.getElementsByClassName() 返回的是HTMLCollection（类数组对象），不是单个DOM元素，直接访问 x.style 会得到undefined，从而触发Cannot set properties of undefined错误。
• 注：getElementsByClassName("adicional oculto") 写法是对的，它会匹配同时拥有adicional和oculto两个类的元素。

解决方法 #

场景1：页面只有一个目标元素 #

直接取集合的第一个元素，同时加判断避免无元素时报错：

function muestra(){
    var x = document.getElementsByClassName("adicional oculto");
    if(x.length > 0){
        x[0].style.visibility = "hidden";
    }
}

场景2：页面有多个目标元素 #

遍历集合，逐个修改元素样式：

function muestra(){
    var elements = document.getElementsByClassName("adicional oculto");
    for(var i = 0; i < elements.length; i++){
        elements[i].style.visibility = "hidden";
    }
}

更简洁的替代方案 #

使用document.querySelectorAll()，支持标准CSS选择器，遍历更灵活：

function muestra(){
    var elements = document.querySelectorAll(".adicional.oculto");
    elements.forEach(el => {
        el.style.visibility = "hidden";
    });
}

内容的提问来源于stack exchange，提问作者LoloRG