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()	是	是	是	是	是

列印頁面