JS获取class对象|极客笔记

JS获取class对象

在JavaScript中，我们经常需要获取页面上的元素，并对它们进行操作。获取class对象是常见的操作之一，因为我们经常会给元素指定一个特定的类名，然后通过这个类名来获取元素对象。

通过document.getElementsByClassName()方法获取class对象

JavaScript提供了一个方便的方法来获取具有特定类名的元素对象：document.getElementsByClassName()。这个方法会返回一个包含指定类名的所有元素的集合。

语法如下：

var elements = document.getElementsByClassName(className);

其中，className为要获取的类名。如果有多个元素具有相同的类名，这个方法会返回一个包含这些元素的集合。如果没有找到具有指定类名的元素，这个方法会返回一个空的集合。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取class对象示例</title>
</head>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>

    <script>
        var boxes = document.getElementsByClassName("box");

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

运行结果：

Box 1
Box 2
Box 3
Box 4

上面的示例中，我们给四个<div>元素添加了相同的类名box，然后通过document.getElementsByClassName("box")获取这些元素，然后利用for循环遍历输出每个元素的textContent。

通过querySelectorAll()方法获取class对象

除了document.getElementsByClassName()方法，还可以使用querySelectorAll()方法来获取具有指定类名的元素对象。这个方法可以接受CSS选择器作为参数，更加灵活，可以选择具有复杂类名的元素。

语法如下：

var elements = document.querySelectorAll(".className");

其中，.className为要获取的类名。这个方法会返回一个包含所有符合选择器条件的元素的集合。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取class对象示例</title>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="outer">
            <div class="box">Box 2</div>
        </div>
        <div class="box">Box 3</div>
        <div class="outer">
            <div class="box">Box 4</div>
        </div>
    </div>

    <script>
        var boxes = document.querySelectorAll(".box");

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

运行结果：

Box 1
Box 2
Box 3
Box 4

在这个示例中，我们通过document.querySelectorAll(".box")获取具有类名box的元素。这个方法返回所有包含box类名的<div>元素，即Box 1、Box 2、Box 3和Box 4。然后我们遍历输出它们的textContent。

总结

获取class对象是JavaScript中常见的操作之一，通过document.getElementsByClassName()和document.querySelectorAll()方法可以方便地获取具有指定类名的元素对象，并对它们进行操作。这些方法是非常常用的DOM操作方法，在我们编写前端代码时可以灵活运用，实现对页面元素的动态控制。