JS通过class获取元素的方法

1. 前言

在使用JavaScript进行网页开发过程中，操作DOM元素是非常常见的任务。常常需要通过元素的class属性来获取或者修改特定的DOM元素。本文将详细介绍如何使用JavaScript通过class获取元素的各种方法。

2. getElementByClassName方法

getElementByClassName方法是通过元素的class属性获取元素的一种常见方法。该方法返回一个带有指定类名的元素的集合。以下是使用该方法的示例代码：

<html>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <script>
        var elements = document.getElementsByClassName('box');

        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i].innerHTML);
        }
    </script>
</body>
</html>

上述示例代码的输出结果为：

Box 1
Box 2
Box 3

3. querySelector方法

querySelector方法是通过选择器字符串来获取元素的一种灵活的方法。它可以通过class选择器来定位元素。该方法返回匹配的第一个元素。以下是使用该方法的示例代码：

<html>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <script>
        var element = document.querySelector('.box');
        console.log(element.innerHTML);
    </script>
</body>
</html>

上述示例代码的输出结果为：

Box 1

需要注意的是，querySelector方法只返回匹配的第一个元素。如果需要获取全部匹配的元素，可以使用querySelectorAll方法。

4. querySelectorAll方法

querySelectorAll方法是通过选择器字符串来获取元素的一种灵活的方法。通过该方法可以获取匹配的所有元素，并返回一个NodeList对象。以下是使用该方法的示例代码：

<html>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <script>
        var elements = document.querySelectorAll('.box');

        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i].innerHTML);
        }
    </script>
</body>
</html>

上述示例代码的输出结果为：

Box 1
Box 2
Box 3

5. classList属性

在ES6之前，为元素添加、删除或切换class是比较繁琐的操作。在ES6中，可以使用classList属性来简化这些操作。classList属性返回一个元素的类名集合，可以通过它来添加、删除或切换class。以下是使用classList属性的示例代码：

<html>
<body>
    <div id="myDiv" class="box">Box</div>

    <script>
        var element = document.getElementById('myDiv');

        element.classList.add('new-class');
        console.log(element.classList);

        element.classList.remove('box');
        console.log(element.classList);

        element.classList.toggle('new-class');
        console.log(element.classList);
    </script>
</body>
</html>

上述示例代码的输出结果为：

DOMTokenList [ "box", "new-class" ]
DOMTokenList [ "new-class" ]
DOMTokenList []

6. 实用技巧

6.1. 循环遍历元素集合

在使用getElementByClassName或querySelectorAll方法获取元素集合时，通常需要循环遍历这些元素进行操作。下面是一个循环遍历元素集合的示例代码：

<html>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <script>
        var elements = document.getElementsByClassName('box');

        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i].innerHTML);
        }
    </script>
</body>
</html>

6.2. 检查元素是否包含某个class

有时候需要判断一个元素是否包含某个class，可以使用contains方法。以下是一个检查元素是否包含某个class的示例代码：

<html>
<body>
    <div id="myDiv" class="box">Box</div>

    <script>
        var element = document.getElementById('myDiv');

        if (element.classList.contains('box')) {
            console.log('该元素包含box类');
        } else {
            console.log('该元素不包含box类');
        }
    </script>
</body>
</html>

上述示例代码的输出结果为：