document.querySelector 是 Web API 中的一个方法，用于从文档（DOM）中选择与指定选择器或选择器组匹配的第一个 Element。如果没有找到任何匹配的元素，则返回 null。
这个方法使用的是 CSS 选择器语法来选择元素。以下是一些例子：
'#myId'：选择id为myId的元素。'.myClass'：选择类名为myClass的所有元素中的第一个。'div'：选择第一个div元素。'div.myClass'：选择第一个类名为myClass的div元素。
'a[href="http://example.com"]'：选择href属性值为http://example.com的第一个a元素。
示例
假设我们有以下 HTML 结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document Query Selector Example</title> </head> <body> <div id="myDiv" class="myClass">Hello, World!</div> <p class="myClass">Another paragraph with the same class.</p> <script> // 选择 id 为 'myDiv' 的元素 let elementById = document.querySelector('#myDiv'); if (elementById) { console.log(elementById.textContent); // 输出 "Hello, World!" } // 选择第一个类名为 'myClass' 的元素（在这种情况下，它是 div） let elementByClass = document.querySelector('.myClass'); if (elementByClass) { console.log(elementByClass.textContent); // 输出 "Hello, World!" } </script> </body> </html>
在这个例子中，document.querySelector('#myDiv') 将返回具有 id 为 myDiv 的 div 元素，而 document.querySelector('.myClass') 将返回具有类名为 myClass 的所有元素中的第一个（在这种情况下，也是 div）。
注意，document.querySelector 只会返回匹配选择器的第一个元素。如果你想选择所有匹配的元素，应该使用 document.querySelectorAll，它会返回一个 NodeList 对象，包含所有匹配的元素。
