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 日本語/选项
选项值=plPolski/option
期权价值=pt 葡萄牙/期权
选择的选项值=zh 中国的/选项
/选择
脚本
var lang=文档。查询选择器(“# language-picker”)；
lang.addEventListener(change ，函数(e) {
if (e.target.value===en) {
窗户。location=“/”；
}否则{
窗户。位置=/ e .目标。价值；
}
});
/脚本
我们小编提醒：因为ie8以上版本才支持查询选择器，请大家酌情使用。
