快捷導航

JavaScript獲取class元素的幾種實現(xiàn)方法

更新時間：2025年05月20日 09:37:55 作者：快點好好學習吧

在Web開發(fā)中,JavaScript(簡稱JS)是一種非常重要的腳本語言,用于實現(xiàn)頁面的動態(tài)交互,其中,根據(jù)class獲取元素并進行點擊操作是常見的需求之一,本文將詳細介紹JavaScript獲取class元素的幾種實現(xiàn)方法,需要的朋友可以參考下

1. 使用 document.getElementsByClassName 方法

這是一個較為傳統(tǒng)的方法，它會返回一個實時的 HTMLCollection 對象，包含了所有具有指定類名的元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByClassName Example</title>
</head>

<body>
    <div class="example">這是一個示例 div 1</div>
    <div class="example">這是一個示例 div 2</div>
    <script>
        // 獲取所有具有 "example" 類名的元素
        const elements = document.getElementsByClassName('example');
        // 遍歷 HTMLCollection 并輸出每個元素的文本內(nèi)容
        for (let i = 0; i < elements.length; i++) {
            console.log(elements[i].textContent);
        }
    </script>
</body>

</html>

在上述代碼中，document.getElementsByClassName('example') 會返回所有類名為 example 的元素，然后通過 for 循環(huán)遍歷這些元素并輸出其文本內(nèi)容。需要注意的是，HTMLCollection 是實時更新的，當 DOM 結(jié)構(gòu)發(fā)生變化時，它會自動更新。

2. 使用 document.querySelectorAll 方法

該方法更加靈活，它可以使用 CSS 選擇器來獲取元素，會返回一個靜態(tài)的 NodeList 對象。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>querySelectorAll Example</title>
</head>

<body>
    <div class="example">這是一個示例 div 1</div>
    <div class="example">這是一個示例 div 2</div>
    <script>
        // 獲取所有具有 "example" 類名的元素
        const elements = document.querySelectorAll('.example');
        // 使用 forEach 方法遍歷 NodeList 并輸出每個元素的文本內(nèi)容
        elements.forEach((element) => {
            console.log(element.textContent);
        });
    </script>
</body>

</html>

在這段代碼里，document.querySelectorAll('.example') 通過 CSS 選擇器 .example 獲取所有類名為 example 的元素，然后使用 forEach 方法遍歷 NodeList 并輸出元素的文本內(nèi)容。與 HTMLCollection 不同，NodeList 是靜態(tài)的，DOM 結(jié)構(gòu)的變化不會影響它。

3. 使用 Element.prototype.getElementsByClassName 方法

如果你想在某個特定元素的子元素中查找具有指定類名的元素，可以使用這個方法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element getElementsByClassName Example</title>
</head>

<body>
    <div id="parent">
        <div class="example">這是父元素下的示例 div 1</div>
        <div class="example">這是父元素下的示例 div 2</div>
    </div>
    <div class="example">這是父元素外的示例 div</div>
    <script>
        // 獲取父元素
        const parent = document.getElementById('parent');
        // 在父元素的子元素中獲取所有具有 "example" 類名的元素
        const childElements = parent.getElementsByClassName('example');
        // 遍歷 HTMLCollection 并輸出每個元素的文本內(nèi)容
        for (let i = 0; i < childElements.length; i++) {
            console.log(childElements[i].textContent);
        }
    </script>
</body>

</html>

在上述代碼中，先通過 document.getElementById('parent') 獲取父元素，然后使用 parent.getElementsByClassName('example') 在父元素的子元素中查找類名為 example 的元素，最后遍歷并輸出這些元素的文本內(nèi)容。