HTML - DOM 元素 getElementsByClassName() 方法

HTML DOM 元素 **getElementsByClassName()** 方法检索文档或特定元素内与指定类名匹配的元素的实时 HTMLCollection。它允许根据元素的类属性有效地选择和操作多个元素。

语法

element.getElementsByClassName(classNames)

参数

此方法接受上面提到的单个参数，如下所述。

参数	描述
classNames	指定一个或多个类名以检索匹配元素的字符串。

返回值

返回一个 HTMLCollection 对象，其中包含具有指定类名的元素集合。

HTML DOM 元素 getElementsByClassName() 方法示例

以下是一些演示 getElementsByClassName() 方法用法的示例

按类计数元素

此 HTML 示例演示了如何在单击按钮后计算并显示具有给定类 (note) 的元素数量。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Counting Elements by Class
    </title>
</head>
<body>
    <p class="note">Note 1</p>
    <p>Paragraph 2</p>
    <p class="note">Note 3</p>
    
    <button onclick="countNotes()">
    Count Notes
    </button>
    <div id="countDisplay"></div>
    
    <script>
    // Count elements with class 'note' and display count
    function countNotes() {
        const notes = 
        document.getElementsByClassName('note');
        document.getElementById
        ('countDisplay').textContent = 
        `Number of notes: ${notes.length}`;
    }
    </script>
</body>
</html>

添加事件监听器

这将一个点击事件监听器附加到具有类“btn”的按钮。单击任何按钮都会触发一个警报（“Button clicked！”），展示了用于事件处理的 getElementsByClassName()。

 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add Event Listener</title>
</head>
<body>
    <button class="button">Button 1</button>
    <button class="button">Button 2</button>
    <button class="button">Button 3</button>

    <script>
        const buttons = 
        document.getElementsByClassName('button');
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click',function()
            {
                this.textContent = 
                `Button ${i + 1} is clicked`;
            });
        }
    </script>
</body>
</html>

动态事件处理

此示例通过使用 getElementsByClassName() 选择所有具有特定类的元素来引入可点击的<div> 元素。当单击<div> 时，它会动态更改所单击<div> 的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dynamic Event Handling</title>
    <style>
    .clickable {
        cursor: pointer;
        padding: 10px;
        margin: 5px;
        background-color: lightgray;
    }
    .highlighted {
        background-color: lightblue;
    }
    </style>
</head>

<body>
    <div class="clickable">Clickable Div 1</div>
    <div class="clickable">Clickable Div 2</div>
    <div class="clickable">Clickable Div 3</div>
    
    <script>
    // Toggle class 'highlighted' on click
    const clickableDivs = 
    document.getElementsByClassName('clickable');
    for (let i = 0; i < clickableDivs.length; i++) {
        clickableDivs[i].addEventListener
        ('click', function() {
        this.classList.toggle('highlighted');
        });
    }
    </script>
</body>

</html>

支持的浏览器

方法
getElementsByClassName()	是	是	是	是	是

打印页面