HTML DOM Document querySelector()
示例
获取第一个 <p> 元素
document.querySelector("p");
自己动手试一试 »
获取第一个 class="example" 的元素
document.querySelector(".example");
自己动手试一试 »
更多示例见下文。
描述
querySelector() 方法返回第一个匹配 CSS 选择器的元素。
要返回所有匹配项（不仅仅是第一个），请改用 querySelectorAll()。
如果选择器无效，querySelector() 和 querySelectorAll() 都会抛出 SYNTAX_ERR 异常。
教程
QuerySelector 方法
GetElement 方法
HTMLCollection 和 NodeList 的区别
NodeList 和 HTMLCollection 非常相似。
两者都是从文档中提取的节点（元素）的类数组集合（列表）。节点可以通过索引号访问。索引从 0 开始。
两者都有一个 length 属性，返回列表中（集合中）元素的数量。
HTMLCollection 是 文档元素 的集合。
NodeList 是 文档节点 的集合（元素节点、属性节点和文本节点）。
HTMLCollection 的项目可以通过它们的名称、ID 或索引号访问。
NodeList 的项目只能通过它们的索引号访问。
HTMLCollection 始终是 实时 集合。示例：如果您在 DOM 中向列表中添加一个 <li> 元素，HTMLCollection 中的列表也会随之更改。
NodeList 通常是 静态 集合。示例：如果您在 DOM 中向列表中添加一个 <li> 元素，NodeList 中的列表将不会更改。
getElementsByClassName() 和 getElementsByTagName() 方法返回一个实时的 HTMLCollection。
querySelectorAll() 方法返回一个静态的 NodeList。
childNodes 属性返回一个实时的 NodeList。
语法
document.querySelector(CSS 选择器)
参数
| 参数 | 描述 |
| CSS 选择器 |
必需。 一个或多个 CSS 选择器。 CSS 选择器根据 ID、类、类型、属性、属性值等选择 HTML 元素。 有关完整列表，请参阅我们的 CSS 选择器参考。 对于多个选择器，请用逗号分隔每个选择器（参见“更多示例”）。 |
返回值
| 类型 | 描述 |
| 对象 | 一个 NodeList，包含与 CSS 选择器匹配的第一个元素。 如果没有找到匹配项，则返回 null。 |
更多示例
选择第一个 <h3> 或第一个 <h4>
<h3>一个 h3 元素</h3>
<h4>一个 h4 元素</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
自己动手试一试 »
选择第一个 <h3> 或第一个 <h4>
<h4>一个 h4 元素</h4>
<h3>一个 h3 元素</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
自己动手试一试 »
浏览器支持
document.querySelector() 是 DOM Level 1 (1998) 的一个特性。
所有浏览器都完全支持。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
