目录

HTML DOM querySelector() 方法

❮上一节 ❮ 元素对象参考下一节❯

示例

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

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

亲自试一试 »

下面有更多 "亲自试一试" 示例。

描述

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

笔记：querySelector() 方法仅返回与指定选择器匹配的第一个元素。要返回所有匹配项，请使用查询选择器全部()方法代替。

也可以看看：

classList 属性

querySelectorAll() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

HTML DOM 样式对象

教程：

CSS 选择器参考

浏览器支持

表中的数字指定完全支持该方法的第一个浏览器版本。

Method
querySelector()	4.0	8.0	3.5	3.2	10.0

语法

element.querySelector( CSS selectors)

参数值

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

技术细节

DOM 版本：	选择器级别 1 元素对象
返回值：	与指定 CSS 选择器匹配的第一个元素。如果未找到匹配项，则返回 null。如果指定的选择器无效，则引发 SYNTAX_ERR 异常。

更多示例

示例

更改 <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";

亲自试一试 »

相关页面

CSS 教程：CSS 选择器

CSS 参考：CSS 选择器参考

JavaScript 教程：JavaScript HTML DOM 节点列表

JavaScript 参考：文档.querySelector()

JavaScript 参考：元素.querySelectorAll()

HTML DOM 参考：document.querySelectorAll()

❮上一节 ❮ 元素对象参考下一节❯