HTML DOM querySelector() 方法

querySelector() 方法简介

querySelector() 方法是 Document 对象的方法，用于在文档中选择一个元素。它接受一个字符串参数，该参数是一个 CSS 选择器，用于定位要选取的元素。如果找到匹配的元素，则返回第一个匹配的元素，如果没有找到匹配的元素，则返回 null。

使用 querySelector() 方法

下面是一个简单的例子，演示如何使用 querySelector() 方法来选取页面中的元素：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>querySelector() 方法示例</title>
</head>
<body>
    <div id="container">
        <h1>Hello, World!</h1>
        <p>This is a paragraph.</p>
    </div>

    <script>
        // 选取 id 为 container 的元素
        var container = document.querySelector('#container');
        
        // 修改选取到的元素的文本内容
        container.innerHTML = 'Hello, Web Frontend Development!';
    </script>
</body>
</html>

在这个例子中，我们通过 querySelector() 方法选取了 id 为 container 的元素，并修改了它的文本内容。

querySelector() 方法的参数

作为参数传递给 querySelector() 方法的选择器可以是任何有效的 CSS 选择器。这意味着你可以使用类选择器、标签选择器、属性选择器等来定位元素。

以下是一些常见的选择器示例：

• 通过标签名选取元素：document.querySelector('p')
• 通过类名选取元素：document.querySelector('.class-name')
• 通过 id 选取元素：document.querySelector('#id-name')
• 通过属性选取元素：document.querySelector('[attribute-name="value"]')

注意事项

在使用 querySelector() 方法时，需要注意以下几点：

1. 如果要选取多个元素，应使用 querySelectorAll() 方法。
2. 如果选择器无效或没有匹配的元素，querySelect() 方法会返回 null。
3. 查询结果会受到文档结构和 CSS 样式的影响，需要谨慎选择选择器。

总的来说，querySelector() 方法是一个非常强大且灵活的方法，可以帮助我们更方便、更精确地操作页面中的元素。希望本文对你有所帮助，谢谢阅读！