HTML DOM 文档 querySelector()
示例
获取第一个 <p> 元素
document.querySelector("p");
自己尝试 »
获取第一个具有类“example”的元素
document.querySelector(".example");
自己尝试 »
更多示例见下。
描述
querySelector() 方法返回第一个匹配 CSS 选择器的元素。
要返回所有匹配项（不仅仅是第一个），请使用querySelectorAll()。
如果选择器无效，则querySelector() 和querySelectorAll() 都会抛出 SYNTAX_ERR 异常。
教程
querySelector 方法
获取元素方法
HTMLCollection 和 NodeList 之间的区别
NodeList 和 HTMLcollection 非常相似。
两者都是从文档中提取的节点（元素）的类似数组的集合（列表）。可以通过索引号访问节点。索引从 0 开始。
两者都有一个length 属性，它返回列表（集合）中元素的数量。
HTMLCollection 是文档元素的集合。
NodeList 是文档节点（元素节点、属性节点和文本节点）的集合。
可以通过名称、id 或索引号访问 HTMLCollection 项目。
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 选择器参考。 对于多个选择器，用逗号分隔每个选择器（参见“更多示例”）。 |
返回值
| 类型 | 描述 |
| 对象 | 一个包含与 CSS 选择器匹配的第一个元素的NodeList。 如果找不到匹配项，则返回 null。 |
更多示例
选择第一个 <h3> 或第一个 <h4>
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
自己尝试 »
选择第一个 <h3> 或第一个 <h4>
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
自己尝试 »
浏览器支持
document.querySelector() 是 DOM 级别 1 (1998) 的功能。
它在所有浏览器中都得到完全支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
