JavaScript getElementsByClassName() 与 getElementById() 方法

getElementsByClassName()方法：该方法返回一个包含所有具有指定类名的对象，作为代表节点集合的 HTML Collection 对象的集合。可以使用从零开始的索引访问返回的元素。

句法：

document.getElementsByClassName("class_name");

参数：要获取的元素的类名。

返回值：此函数返回 HTML 集合对象。

getElementById()方法：此方法返回具有指定值的 ID 属性的元素。它是最常用的 HTML DOM 方法，用于操作文档中的元素或从中获取信息。

句法：

document.getElementById("id_name");

参数：此函数接受单个参数，即元素 ID，它用于保存元素的 ID。

返回值：此函数返回元素的 ID 属性值。

下面的示例说明了 getElementsByClassName() 和 getElementById() 方法之间的区别：

示例 1：此示例使用 getElementsByClassName() 方法。

HTML

  

    
        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 yellow button
        
        
            Click to change to green button
        
    
  
    
        function yellow() {
            document.getElementsByClassName('yellow')[0]
                .style.backgroundColor = 'yellow';
        }
  
        function green() {
            var elements = document
                .getElementsByClassName('green');
  
            for (var i = 0; i < elements.length; i++) {
                elements[i].style.backgroundColor = 'green';
            }
        } 
    

  

输出：

在单击任何按钮之前：

单击两个按钮后：

示例 2：此示例使用 getElementById() 方法。

HTML

  

    
  
        // Function to change the 
        // color of element 
        function color() {
            var demo = document
                .getElementById("heading");
            demo.style.color = "green";
        } 
    

  

    GeeksforGeeks
  
    DOM getElementById() Method
  
    
    

  

输出：

点击按钮前：

点击按钮后：

支持的浏览器： DOM getElementsByClassName() 和 getElementById() 方法支持的浏览器如下：

• 谷歌浏览器 4.0
• 浏览器 9.0
• 火狐 3.0
• 歌剧 9.5
• Safari 3.1