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 的区别

NodeListHTMLcollection 非常相似。

两者都是从文档中提取的节点(元素)的类似数组的集合(列表)。可以通过索引号(下标)访问节点。索引从 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 支持 支持 支持 支持

相关页面

教程:

CSS 选择器

CSS 选择器参考手册

HTML DOM NodeList 参考手册

QuerySelector 方法:

querySelector() 方法

querySelectorAll() 方法

GetElement 方法:

getElementById() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法