js 根据class获取元素|极客笔记

js 根据class获取元素

在前端开发中，经常会遇到需要根据特定的class名称来获取元素的情况。在JavaScript中，可以使用一些方法来实现这一功能。本文将详细介绍如何使用JavaScript根据class来获取元素，并且提供一些实际应用的示例。

1. document.getElementsByClassName()

document.getElementsByClassName()方法可以通过元素的class名称来获取所有拥有该class的元素。这个方法返回一个HTMLCollection对象，其中包含所有匹配class的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Elements By Class Name</title>
</head>
<body>
    <div class="container">
        <p class="para">Paragraph 1</p>
        <p class="para">Paragraph 2</p>
        <p class="para">Paragraph 3</p>
    </div>

    <script>
        const paras = document.getElementsByClassName("para");
        for (let i = 0; i < paras.length; i++) {
            console.log(paras[i].textContent);
        }
    </script>
</body>
</html>

运行上面的代码将会输出三个段萗的内容：

Paragraph 1
Paragraph 2
Paragraph 3

2. querySelectorAll()

除了使用document.getElementsByClassName()方法外，还可以使用querySelectorAll()方法来根据class获取元素。querySelectorAll()方法允许使用CSS选择器来获取元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Query Selector All</title>
</head>
<body>
    <div class="container">
        <p class="para">Paragraph 1</p>
        <p class="para">Paragraph 2</p>
        <p class="para">Paragraph 3</p>
    </div>

    <script>
        const paras = document.querySelectorAll(".para");
        paras.forEach(para => {
            console.log(para.textContent);
        });
    </script>
</body>
</html>

在这个示例中，我们使用了CSS选择器.para来获取所有拥有para类名的元素，并且打印出它们的文本内容。

3. 使用classList.contains()

在实际开发中，可能需要检查某个元素是否包含特定的class。可以使用classList.contains()方法来判断一个元素是否包含某个class。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check ClassList</title>
</head>
<body>
    <div class="container">
        <p class="para">Paragraph 1</p>
    </div>

    <script>
        const para = document.querySelector(".para");
        if (para.classList.contains("para")) {
            console.log("Element has class 'para'");
        } else {
            console.log("Element does not have class 'para'");
        }
    </script>
</body>
</html>

运行上述代码将会输出：

Element has class 'para'

4. 在事件处理程序中使用

在实际的应用中，经常需要根据class获取元素并在事件发生时对其进行操作。以下是一个示例，当点击按钮时，改变所有拥有highlight类名的元素的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="para">Paragraph 1</p>
        <p class="para highlight">Paragraph 2</p>
    </div>

    <button id="btn">Highlight Paragraphs</button>

    <script>
        const btn = document.getElementById("btn");
        btn.addEventListener("click", function() {
            const paras = document.querySelectorAll(".highlight");
            paras.forEach(para => {
                para.style.backgroundColor = "orange";
            });
        });
    </script>
</body>
</html>

在这个示例中，当按钮被点击时，所有具有highlight类名的段落标签的背景颜色都会变成橙色。

以上就是通过JavaScript根据class获取元素的几种方法以及一些实际应用的示例。