codecamp

HTML DOM querySelector() 方法

HTML DOM querySelector() 方法

HTML 元素对象参考手册 元素对象

实例

修改 id="demo" 的 <div>元素的第一个子元素文本内容:

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

尝试一下 »

定义与用法

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

注意: querySelector() 方法只返回匹配指定选择器的第一个元素。如果你要返回所有匹配元素,请使用querySelectorAll() 方法替代。

对于更多的 CSS 选择,可以访问我们的 CSS 选择器参考手册


浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法          
querySelector() 4.0 8.0 3.5 3.1 10.0


语法

element.querySelector(CSS 选择器)

参数值

参数类型 描述
CSS 选择器String必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

对于多个选择器,使用逗号隔开,返回一个匹配的元素。

提示: 更多 CSS 选择器,请参阅我们的 CSS 选择器参考手册

技术细节

DOM 版本:Selectors Level 1 Element Object
返回值:匹配指定 CSS 选择器的第一个元素。 如果没有找到,返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。


更多实例

实例

修改 <div> 元素中的第一个 <p> 元素内容:

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

尝试一下 »

实例

修改 <div> 元素中第一个 class="example" 的子元素内容:

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

尝试一下 »

实例

修改 <div> 元素中第一个 class="example" 的 <p> 元素:

var x = document.getElementById("myDIV");
x.querySelector("p.example").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";

尝试一下 »

但是,如果 <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";

尝试一下 »


相关页面

JavaScript 参考手册: document.querySelector()


HTML 元素对象参考手册 元素对象

温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

HTML DOM对象

HTML DOM 引用对象

HTML DOM Password 对象

HTML DOM Link 对象

HTML DOM Select 对象

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }