HTML DOM querySelector() 方法
示例
更改 <div> 元素中第一个带有 class="example" 的子元素的文本
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
自己动手试一试 »
更多“自己尝试”的例子见下文。
描述
querySelector() 方法返回与元素指定 *CSS 选择器*匹配的第一个子元素。
注意： querySelector() 方法只返回与指定选择器匹配的第一个元素。要返回所有匹配项，请改用 querySelectorAll() 方法。
另请参阅
教程
浏览器支持
表格中的数字指定了完全支持该方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
语法
element.querySelector(CSS 选择器)
参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| CSS 选择器 | 字符串 | 必需。指定一个或多个 CSS 选择器以匹配元素。这些选择器用于根据 HTML 元素的 ID、类、类型、属性、属性值等来选择 HTML 元素。 对于多个选择器，请用逗号分隔每个选择器。返回的元素取决于文档中首先找到的元素（参见“更多示例”）。 提示： 有关所有 CSS 选择器的列表，请查看我们的 CSS 选择器参考。 |
技术详情
| 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>一个 h2 元素</h2>
<h3>一个 h3 元素</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
自己动手试一试 »
但是，如果 <h3> 元素在 <div> 中放置在 <h2> 元素之前。那么 <h3> 元素将获得红色背景颜色。
<div id="myDIV">
<h3>一个 h3 元素</h3>
<h2>一个 h2 元素</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
自己动手试一试 »
相关页面
CSS 教程：CSS 选择器
CSS 参考：CSS 选择器参考
JavaScript 教程：JavaScript HTML DOM 节点列表
JavaScript 参考：document.querySelector()
JavaScript 参考：element.querySelectorAll()
HTML DOM 参考：document.querySelectorAll()
