HTML | DOM querySelector() 方法

介绍

querySelector() 方法是 HTML 文档中常用的 DOM（文档对象模型）方法之一，用于返回文档中匹配指定 CSS 选择器的第一个元素。该方法从文档的根节点开始查找，返回满足选择器条件的第一个元素。如果没有找到匹配元素，则返回 null。

querySelector() 方法返回的是一个 Element 对象。如果需要对多个匹配的元素进行操作，可以使用 querySelectorAll() 方法。

语法

querySelector() 方法的基本语法如下：

document.querySelector(selectors)

其中，selectors 参数表示要查找的 CSS 选择器，可以是标签名、类名、ID 等等。

示例

假如我们有如下 HTML 结构：

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

如果我们想要选中这个列表中的第一个 li 元素，可以使用如下代码：

const firstItem = document.querySelector('li.item');

这样会返回一个代表第一个列表项的 Element 对象。

注意事项

• querySelector() 方法只会返回匹配到的第一个元素，如果需要获取多个匹配元素，需要使用 querySelectorAll() 方法。
• 选择器可以使用所有支持的 CSS 选择器。
• 如果选择器没有匹配元素，querySlector() 方法会返回 null。
• querySelector() 方法只作用于文档树的第一级元素。
• querySelector() 方法是在 Element 接口中定义的，因此它也可以在具有单个元素的集合对象上使用，比如 Document 和 DocumentFragment。