querySelector()方法只返回与指定选择器匹配的第一个元素。如果需要返回所有元素，请改用querySelectorAll()方法。
querySelector 定义和用法
querySelector()方法返回文档中与指定CSS选择器匹配的元素。
注意：querySelector()方法只返回与指定选择器匹配的第一个元素。如果需要返回所有元素，请改用querySelectorAll()方法。
浏览器支持
表中的数字表示支持此方法的第一个浏览器的版本号。
语法
document.querySelector(CSS选择器)
参数值
参数
类型
形容
CSS选择器
线
你必须。为一个或多个匹配元素指定CSS选择器。您可以使用它们的id、类、类型、属性、属性值等。来选择元素。
对于多个选择器，使用逗号分隔它们，并返回匹配的元素。
技术细节
DOM版本：
选择器级别1文档对象
返回值：
指定CSS选择器的第一个元素。如果找不到，则返回null。如果指定了非法选择器，则会引发SYNTAX_ERR异常。
实例
获取文档中id='demo '的第一个元素：
id=“demo”id=“demo”的p元素/p
id=“demo”id=“demo”的p元素/p
单击p按钮，用第一个id='demo' /p修改p元素的内容
按钮onclick='myFunction()'单击我/按钮
脚本
函数myFunction() {
document . query selector(# demo)。innerHTML='你好，世界！'；
}
/脚本
更多示例
1.获取文档中的第一个P元素：
p是一个p和元素。/p
p也是一个p和元素。/p
单击p按钮修改文档中第一个p元素的背景色。/p
按钮onclick='myFunction()'单击我/按钮
脚本
函数myFunction() {
document . query selector(' p '). style . background color=' red '；
}
/脚本
2.获取文档中class='example '的第一个元素：
H2标题/h2
带有p=' example' class=' example '的段落。/p
单击p按钮为第一个class='example '的元素添加背景色。/p
按钮onclick='myFunction()'单击我/按钮
脚本
函数myFunction() {
document.querySelector('。example '). style . background color=' red '；
}
/脚本
3.获取文档中class='example '的第一个P元素：
H2标题/h2
带有p=' example' class=' example '的段落。/p
单击p按钮将背景色添加到class='example '的第一个p元素。/p
按钮onclick='myFunction()'单击我/按钮
脚本
函数myFunction() {
document . query selector(' p . example '). style . background color=' red '；
}
/脚本
4.获取文档中第一个具有“target”属性的A元素：
！文档类型html
超文本标记语言
头
meta charset='utf-8 '
我们/标题
风格
目标
背景色：黄色；
}
/风格
/头
身体
P CSS选择器a[target]确保具有目标属性的所有链接的背景色为黄色：/p
a href='//www . jb51 . net ' jb51 . net/a
a href='//www . Disney . com ' target=' _ blank ' Disney . com/a
a href='//www . Wikipedia . org ' target=' _ top ' Wikipedia . org/a
单击p按钮将红色背景添加到具有目标属性的链接中。/p
按钮onclick='myFunction()'单击我/按钮
脚本
函数myFunction() {
document . query selector(' a[target]')，style.border='10px纯红'；
}
/脚本
/body
/html
5.以下示例演示了多个选择器的使用。
假设您选择了两个选择器：h2和h3元素。
以下代码将向文档的第一个h2元素添加背景色：
H2元素h2 h2
H3元素h3 h3
脚本
document.querySelector('h2，H3 '). style . background color=' red '；
/脚本
6.但是，如果h3元素在文档中位于h2元素之前，h3元素将被设置为指定的背景色。
H3元素h3 h3
H2元素h2 h2
脚本
document.querySelector('h2，H3 '). style . background color=' red '；
/脚本
7.通过获取select的内容实现URL跳转。
选择id='语言选择器'
选项值=' cs ' esky/option
选项值=' en '英语/选项
选项值='es '西班牙语/选项
期权价值='fr '法国法郎/期权
选项值='jp '日本語/选项
选项值='pl'Polski/option
期权价值='pt '葡萄牙/期权
选择的选项值='zh '中国的/选项
/选择
脚本
var lang=文档。查询选择器(“# language-picker”)；
lang.addEventListener('change '，函数(e) {
if (e.target.value==='en') {
窗户。location=“/”；
}否则{
窗户。位置='/' e .目标。价值；
}
});
/脚本
我们小编提醒：因为ie8以上版本才支持查询选择器，请大家酌情使用。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。