HTML DOM Document querySelector() 方法
定义和用法
querySelector() 方法返回与 CSS 选择器匹配的第一个元素。
如需返回所有匹配项（不仅是第一个匹配项），请改用 querySelectorAll()。
如果选择器无效，则 querySelector() 和 querySelectorAll() 都会抛出 SYNTAX_ERR 异常。
实例
例子 1
获取第一个 <p> 元素：
document.querySelector("p");
例子 2
获取 class="example" 的第一个元素：
document.querySelector(".example");
例子 3
获取 class="example" 的第一个 <p> 元素：
document.querySelector("p.example");
例子 4
更改 id="demo" 的元素的文本：
document.querySelector("#demo").innerHTML = "Hello World!";
例子 5
选择第一个其父元素是 <div> 元素的 <p> 元素：
document.querySelector("div > p");
例子 6
选择第一个拥有 "target" 属性的 <a> 元素：
document.querySelector("a[target]");
例子 7
选择第一个 <h3> 或第一个 <h4>：
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
例子 8
选择第一个 <h3> 或第一个 <h4>：
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
语法
document.querySelector(cssSelectors)
参数
| 参数 | 描述 |
|---|---|
| cssSelectors |
必需。一个或多个 CSS 选择器。 CSS 选择器根据 id、类、类型、属性、属性值等选择 HTML 元素。 如需完整列表，请访问我们的 CSS 选择器参考手册。 对于多个选择器，请用逗号分隔每个选择器（请参阅页面上方的实例）。 |
返回值
| 类型 | 描述 |
|---|---|
| 对象 |
包含与 CSS 选择器匹配的第一个元素的 NodeList。 如果没有找到匹配项，则返回 null。 |
HTMLCollection 和 NodeList 的区别
NodeList 和 HTMLcollection 非常相似。
两者都是从文档中提取的节点（元素）的类似数组的集合（列表）。可以通过索引号（下标）访问节点。索引从 0 开始。
两者都有 length 属性，它返回列表（集合）中元素的数量。
HTMLCollection 是文档元素的集合。
NodeList 是文档节点（元素节点、属性节点和文本节点）的集合。
HTMLCollection 项目可以通过它们的名称、id 或索引号来访问。
NodeList 项目只能通过它们的索引号访问。
HTMLCollection 始终是实时的集合。
例如：如果将 <li> 元素添加到 DOM 中的列表，则 HTMLCollection 中的列表也会发生变化。
NodeList 通常是静态的集合。
例如：如果将 <li> 元素添加到 DOM 中的列表，则 NodeList 中的列表不会改变。
getElementsByClassName() 和 getElementsByTagName() 方法都返回实时 HTMLCollection。
querySelectorAll() 方法返回静态 NodeList。
childNodes 属性返回实时 NodeList。
浏览器支持
document.querySelector() 是 DOM Level 1 (1998) 特性。
所有浏览器都支持它：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| 支持 | 9-11 | 支持 | 支持 | 支持 | 支持 |