介绍函数用法：document.querySelector

document.querySelector

是一个 JavaScript 函数，它允许你通过提供一个 CSS 选择器来选择文档中的第一个匹配的元素。这个函数返回匹配的元素（如果找到了匹配项），否则返回

null

。

document.querySelector

是一个非常有用的方法，因为它让你可以通过多种选择器轻松地选择和操作 DOM 元素。

函数的用法如下：

const element = document.querySelector(selector);

其中，

selector

是一个包含 CSS 选择器的字符串，用于查找和选择元素。

以下是一些使用

document.querySelector

的示例：

1. 通过标签名选择元素：const firstParagraph = document.querySelector('p');这将选择文档中的第一个 <p> 元素。
2. 通过类名选择元素：const firstElementWithClass = document.querySelector('.my-class');这将选择文档中具有 my-class 类名的第一个元素。
3. 通过 ID 选择元素：const elementWithId = document.querySelector('#my-id');这将选择具有 my-id ID 的元素。
4. 通过属性选择器选择元素：const firstInputElement = document.querySelector('input[type="text"]');这将选择文档中第一个类型为 text 的 <input> 元素。
5. 通过复合选择器选择元素：const firstElement = document.querySelector('.my-class.another-class');这将选择文档中具有 my-class 和 another-class 类名的第一个元素。

请注意，

document.querySelector

只返回第一个匹配的元素。如果你想选择文档中的所有匹配的元素，可以使用

document.querySelectorAll

函数。这个函数返回一个包含所有匹配元素的 NodeList。

const allElementsWithClass = document.querySelectorAll('.my-class');