getElementByID 有效，getElementsByClassName 不起作用

getElementByID works, getElementsByClassName does not work

本文关键字：不起作用 getElementsByClassName 有效 getElementByID      更新时间：2023-09-26

我正在研究一个解决方案，其中javascript更改div1而不是div2。此代码适用于getElementbyId，但不适用于getElementbyClassName 。为什么这不起作用？

function refer(Div1, Div2) {
    if (document.getElementByClassName('Div1')) {
        if (document.getElementByClassName('Div1').style.display == 'block') {
            var elems = document.getElementsByClassName('Div2');
            for(var i = 0; i < elems.length; i++) { 
                elems[i].style.display = 'block';
            }
            var elem = document.getElementsByClassName('Div1');
            for(var i = 0; i < elem.length; i++) {
                elem[i].style.display = 'none';
            }
        }
    }
}

下面是如何使用getElementsByClassName的示例：

这对你有用吗？

array = document.getElementsByClassName('div1');
for (i = 0; i < array.length; i++) {
    array[i].style.backgroundColor = "red";
}

在Chrome和Edge中工作没有问题。

你使用数组作为对象，getElementbyId和 getElementsByClassName是：

  • getElementbyId将返回一个对象。
  • getElementsByClassName将返回一个数组。

getElementsByClassName

getElementsByClassName(classNames)方法采用一个字符串 包含一组无序的唯一空格分隔标记 表示类。调用时，该方法必须返回实时 NodeList对象，包含文档中所有元素 具有该参数中指定的所有类，并获得了 通过在空格上拆分字符串来类。如果没有令牌 在参数中指定，则该方法必须返回空 节点列表。

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

getElementById(( 方法访问具有指定 id 的第一个元素。

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

在您的代码中，这些行：

1 if (document.getElementByClassName('Div1')) {

2 if (document.getElementByClassName('Div1').style.display == 'block') {

不会按预期工作：特别是第二(2(行，
因为getElementByClassName将返回一个数组，并且数组将没有style属性，您将通过迭代它们来访问每个element。

这就是为什么函数getElementById为您工作的原因，该函数将返回 直接对象 ，因此您将能够访问 style 属性。

一个工作代码：

function refer(Div1,Div2) {
           var elem = document.getElementsByClassName('Div1');
            var elems = document.getElementsByClassName('Div2');
            for(var i = 0; i < elem.length; i++) {
                if (elem[i]) {
                   if (elem[i].style.display == 'block') {
                       elem[i].style.display = 'none';
                       for(var i = 0; i < elems.length; i++) { 
                           elems[i].style.display = 'block';
                       }
                   }
               }
           }
}
相关文章：