HTML DOM getElementsByClassName() 方法

Javascript 中的getElementsByClassName()方法返回一个对象，该对象包含文档中所有具有指定类名的元素作为对象。返回对象中的每个元素都可以通过其索引访问。索引值将从 0 开始。可以在任何单个元素上调用此方法以搜索其具有指定类名的后代元素。

句法：

document.getElementsByClassName(classnames);

参数：这是一个必需的方法，它只接受一个参数，它是一个字符串，其中包含要搜索的元素的空格分隔的类名。对于多个类名的搜索，必须用空格分隔。

注意：我们可以使用 length 属性返回指定类名的文档中所有 HTML 元素的集合，然后通过循环遍历 HTML 元素，我们可以获取想要的信息。

示例 1：此示例描述了 getElementsByClassName() 方法，用于通过类名访问 HTML 元素。

HTML

 

    DOM getElementByClassName() Method
    
    h1 {
        color: green;
    }
     
    body {
        text-align: center;
    }
     
    .example {
        padding: 10px;
        margin: auto;
        margin-top: 10px;
        border: 1px solid black;
        width: 300px;
    }
    

 

    GeeksforGeeks
    DOM getElementByClassName() Method
    
        div1
        div2
        div3
        div4 
    
    document.getElementsByClassName('greenBorder example')[0].style.border =
    "10px solid green";
    document.getElementsByClassName('yellowBorder example')[0].style.border =
    "10px solid yellow";
    

 

输出：

document.getElementsByClassName() 方法

示例 2：此示例描述了document.getElementsByClassName()方法的使用，该方法使用特定颜色访问所有 3 个按钮类并更改单击按钮的颜色以及最后一个按钮将上述所有 3 个按钮重置为其初始状态.

HTML

 

    DOM getElementByClassName() Method
    
    h1 {
        color: green;
    }
     
    body {
        text-align: center;
    }
     
    button {
        background-color: black;
        color: white;
        width: 300px;
        padding: 10px;
        margin: 10px;
        cursor: pointer;
    }
    

 

    GeeksforGeeks
    DOM getElementByClassName() Method
    
        
             Click to change to red button
        
        
        
             Click to change to blue button
        
        
        
             Click to change to yellow button
        
        
        
             Click to change to all buttons to initial state
        
    
    
    function red() {
        document.getElementsByClassName('red')[0]
        .style.backgroundColor = 'red';
    }
 
    function blue() {
        document.getElementsByClassName('blue')[0]
        .style.backgroundColor = 'blue';
    }
 
    function yellow() {
        document.getElementsByClassName('yellow')[0]
        .style.backgroundColor = 'yellow';
    }
 
    function black() {
        var elements = document.getElementsByClassName('black');
        for(var i = 0; i < elements.length; i++) {
            elements[i].style.backgroundColor = 'black';
        }
    }
    

 

输出：

document.getElementsByClassName() 方法

支持的浏览器： DOM getElementsByClassName()支持的浏览器如下：

• 谷歌浏览器 4.0
• 互联网浏览器 9.0
• 微软边缘 12.0
• 火狐3.0
• 歌剧 9.5
• 野生动物园 3.1