快捷導(dǎo)航

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

更新時(shí)間：2025年05月20日 09:37:55 作者：快點(diǎn)好好學(xué)習(xí)吧

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

1. 使用 document.getElementsByClassName 方法

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

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

</html>

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

2. 使用 document.querySelectorAll 方法

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

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

</html>

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

3. 使用 Element.prototype.getElementsByClassName 方法

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

<!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" 類(lèi)名的元素
        const childElements = parent.getElementsByClassName('example');
        // 遍歷 HTMLCollection 并輸出每個(gè)元素的文本內(nèi)容
        for (let i = 0; i < childElements.length; i++) {
            console.log(childElements[i].textContent);
        }
    </script>
</body>

</html>

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

總結(jié)

document.getElementsByClassName：返回實(shí)時(shí)的 HTMLCollection，適用于需要實(shí)時(shí)反映 DOM 變化的場(chǎng)景。
document.querySelectorAll：返回靜態(tài)的 NodeList，支持更復(fù)雜的 CSS 選擇器，使用更靈活。
Element.prototype.getElementsByClassName：用于在特定元素的子元素中查找具有指定類(lèi)名的元素。

到此這篇關(guān)于JavaScript獲取class元素的幾種實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)JavaScript獲取class元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: