HTML DOM querySelector() 方法
示例
更改 <div> 元素中具有类 "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 选择器以匹配元素。 这些用于根据元素的 id、类、类型、属性、属性值等选择 HTML 元素。 对于多个选择器，请用逗号分隔每个选择器。 返回的元素取决于在文档中首先找到的元素（参见“更多示例”）。 **提示：**有关所有 CSS 选择器的列表，请查看我们的 CSS 选择器参考。 |
技术细节
| DOM 版本 | 选择器级别 1 元素对象 |
|---|---|
| 返回值 | 与指定的 CSS 选择器匹配的第一个元素。 如果没有找到匹配项，则返回 null。 如果指定的選擇器無效，則拋出 SYNTAX_ERR 異常。 |
更多示例
示例
更改 <div> 元素中的第一个 <p> 元素的文本
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
自己尝试 »
示例
更改 <div> 元素中具有类 "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 参考：document.querySelector()
JavaScript 参考：element.querySelectorAll()
HTML DOM 参考：document.querySelectorAll()
