HTML DOM Element querySelector() 方法

定义和用法

querySelector() 方法返回与元素的指定 CSS 选择器匹配的第一个子元素。

注意：

querySelector() 方法只返回与指定选择器匹配的第一个元素。如需返回所有匹配项，请改用 querySelectorAll() 方法。

另请参阅：

参考手册：

classList 属性

className 属性

querySelectorAll() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

HTML DOM Style 对象

教程：

CSS 语法

CSS 选择器

CSS 选择器参考手册

实例

例子 1

更改 <div> 元素中 class="example" 的第一个子元素的文本：

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

亲自试一试

页面下方提供更多实例。

语法

element.querySelector(CSSselectors)

参数

参数 描述
CSSselectors

必需。字符串。指定一个或多个 CSS 选择器来匹配元素。

CSS 选择器用于根据 id、类、类型、属性、属性值等来选择 HTML 元素。

对于多个选择器，请用逗号分隔每个选择器。

返回的元素取决于首先在文档中找到的元素（请参阅下方的“更多实例”）。

提示：如需完整的 CSS 选择器列表，请查看我们的 CSS 选择器参考手册。

技术细节

返回值：

匹配指定 CSS 选择器的第一个元素。

如果没有找到匹配项，则返回 null。

如果指定的选择器无效，则抛出 SYNTAX_ERR 异常。
DOM 版本： Selectors Level 1 Element Object

更多实例

例子 2

更改 <div> 元素中第一个 <p> 元素的文本：

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

亲自试一试

例子 3

更改 <div> 元素中 class="example" 的第一个 <p> 元素的文本：

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

亲自试一试

例子 4

更改 <div> 元素中 id="demo" 的元素的文本：

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

亲自试一试

例子 5

为 <div> 元素内设置 target 属性的第一个 <a> 元素添加红色边框：

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

亲自试一试

例子 6

此例演示多个选择器是如何工作的。

假设您有两个元素：<h2> 和 <h3> 元素。

以下代码将为 <div> 中的第一个 <h2> 元素添加背景颜色：

<div id="myDIV">
  <h2>A h2 element</h2>
  <h3>A h3 element</h3>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

亲自试一试

例子 7

但是，如果 <div> 中的 <h3> 元素放置在 <h2> 元素之前。<h3> 元素将获得红色背景色。

<div id="myDIV">
  <h3>A h3 element</h3>
  <h2>A h2 element</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

亲自试一试

浏览器支持

表中的数字注明了首个完全支持该方法的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

相关页面

CSS 教程：CSS 选择器

CSS 参考手册：CSS 选择器参考手册

JavaScript 教程：JavaScript HTML DOM Node List

JavaScript 参考手册：document.querySelector()

JavaScript 参考手册：element.querySelectorAll()

HTML DOM 参考手册：document.querySelectorAll()