HTML DOM querySelectorAll() 方法

在Web前端开发中，操作DOM元素是非常常见的任务。而querySelectorAll()方法是一种非常强大且灵活的方法，可以帮助我们选择多个元素并对其进行操作。

什么是querySelectorAll()方法

querySelectorAll()方法是Document对象的方法，用于返回文档中匹配指定CSS选择器的所有元素，返回的是一个NodeList对象，它类似于数组，但不是数组。

语法

document.querySelectorAll(selector)

• selector：表示一个CSS选择器，用于选择要操作的元素。

使用querySelectorAll()方法

选择单个元素

querySelectorAll()方法可以选择一个或多个元素，如果只需要选择一个元素，可以使用querySelector()方法。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>querySelectorAll()示例</title>
</head>
<body>
    <div class="container">
        <p class="text">Hello World!</p>
        <p class="text">Nice to meet you!</p>
    </div>
    <script>
        const element = document.querySelectorAll('.text')[0];
        console.log(element.textContent);
    </script>
</body>
</html>

在上面的示例中，我们使用.text选择器选择了所有class为text的元素，并且通过[0]的方式获取到第一个元素，然后打印出其textContent。

选择多个元素

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>querySelectorAll()示例</title>
</head>
<body>
    <div class="container">
        <p class="text">Hello World!</p>
        <p class="text">Nice to meet you!</p>
    </div>
    <script>
        const elements = document.querySelectorAll('.text');
        elements.forEach(element => {
            console.log(element.textContent);
        });
    </script>
</body>
</html>

在上面的示例中，我们使用.text选择器选择了所有class为text的元素，并通过forEach方法遍历每个元素，打印出其textContent。

使用选择器

类选择器

const elements = document.querySelectorAll('.text');

在上面的例子中，我们使用类选择器.text选择所有class为text的元素。

ID选择器

const element = document.querySelectorAll('#container');

在上面的例子中，我们使用ID选择器#container选择ID为container的元素。

元素选择器

const elements = document.querySelectorAll('p');

在上面的例子中，我们使用元素选择器p选择所有<p>元素。

属性选择器

const elements = document.querySelectorAll('[data-id="123"]');

在上面的例子中，我们使用属性选择器[data-id="123"]选择所有具有data-id属性且属性值为123的元素。

总结

通过学习querySelectorAll()方法，我们可以更加灵活地选择DOM元素，并对其进行操作。希望本文对你有所帮助，欢迎继续深入学习前端开发知识。