JS获取class|极客笔记

JS获取class

在JavaScript中，我们经常需要通过class来选择元素，然后对其进行操作。在HTML中，一个元素可以有一个或多个class名称，这些class名称可以用来为元素添加样式或行为。

1. document.getElementsByClassName()

document.getElementsByClassName() 方法可以获取文档中所有指定类名的元素，返回一个 HTMLCollection 对象。

语法：

let elements = document.getElementsByClassName("class");

示例：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="container">
        <p class="text">Hello world!</p>
        <p class="text">How are you?</p>
        <p class="text">Nice to meet you!</p>
    </div>

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

运行结果：

Hello world!
How are you?
Nice to meet you!

2. querySelectorAll()

querySelectorAll() 方法可以根据指定的选择器来获取元素，可以选择class、标签名、ID等，返回一个 NodeList 对象。

语法：

let elements = document.querySelectorAll(".class");

示例：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="container">
        <p class="text">Hello world!</p>
        <p class="text">How are you?</p>
        <p class="text">Nice to meet you!</p>
    </div>

    <script>
        let elements = document.querySelectorAll(".text");
        elements.forEach(element => {
            console.log(element.textContent);
        });
    </script>
</body>
</html>

运行结果：

Hello world!
How are you?
Nice to meet you!

3. getElementByClassName()

在IE8及更早版本的IE浏览器中，没有提供getElementsByClassName()方法。但是我们可以通过以下方式实现类似的功能：

function getElementByClassName(className) {
    if (document.getElementsByClassName) {
        return document.getElementsByClassName(className);
    } else {
        let elements = document.getElementsByTagName("*");
        let result = [];
        for (let i = 0; i < elements.length; i++) {
            if (elements[i].className === className) {
                result.push(elements[i]);
            }
        }
        return result;
    }
}

示例：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="container">
        <p class="text">Hello world!</p>
        <p class="text">How are you?</p>
        <p class="text">Nice to meet you!</p>
    </div>

    <script>
        let elements = getElementByClassName("text");
        elements.forEach(element => {
            console.log(element.textContent);
        });
    </script>
</body>
</html>

运行结果：

Hello world!
How are you?
Nice to meet you!

总结

通过以上几种方法，我们可以在JavaScript中获取指定class的元素，并对其进行操作。document.getElementsByClassName()可以方便地获取所有指定类名的元素，querySelectorAll()更加灵活，可以用来选择不同类型的元素。而在IE8及更早版本的IE浏览器中，我们可以通过自定义函数getElementByClassName()来实现类似的功能。在实际开发中，根据需求选择适合的方法来获取class，从而方便地操作DOM元素。