JavaScript Element querySelector() 方法

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

注意：querySelector()方法仅返回与指定选择器匹配的第一个元素。要返回所有匹配项，请改用querySelectorAll()方法。

有关CSS选择器的更多信息，请访问我们的CSS选择器教程和CSS选择器参考。

实例：

在<div>元素中使用class=“example”更改第一个子元素的文本：

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

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
方法
querySelector()	8.0+	4.0+	3.5+	3.2+	10.0+

语法

element.querySelector(CSS selectors)

参数值

参数	类型	描述
CSS selectors	String	需要。指定一个或多个与元素匹配的CSS选择器。这些用于根据ID元素，类，类型，属性，属性值等选择HTML元素。对于多个选择器，使用逗号分隔每个选择器。返回的元素取决于首先在文档中找到的元素（请参阅“更多示例”）。提示：有关所有CSS选择器的列表，请查看我们的CSS选择器参考。

技术细节

项目	描述
返回值：	与指定的CSS选择器匹配的第一个元素。如果未找到匹配项，则返回null。如果指定的选择器无效，则抛出SYNTAX_ERR异常。
DOM版本	Core Level 1

更多例子

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

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

尝试一下

在<div>元素中使用class =“example”更改第一个<p>元素的文本：

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

尝试一下

在<div>元素中更改id =“demo”的元素的文本：

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

尝试一下

将红色边框添加到<div>元素中具有target属性的第一个<a>元素：

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

尝试一下

此示例演示了多个选择器的工作方式。假设您有两个元素：<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";

尝试一下

但是，如果<h3>元素放在<div>中的<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";

尝试一下

JavaScript Element querySelector() 方法