js querySelector()用法

查询选择器的定义和用法

querySelector()方法返回文档中与指定CSS选择器匹配的元素。注意：querySelector()方法只返回与指定选择器匹配的第一个元素。如果需要返回所有元素，请改用querySelectorAll()方法。

浏览器支持

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

语法文档。queryselector (CSS选择器)

参数值

参数类型描述CSS选择器字符串必须为。指定一个或多个匹配元素的CSS选择器。您可以使用它们的id、类、类型、属性、属性值等。选择元素。对于多个选择器，用逗号分隔它们并返回匹配的元素。技术细节

DOM版本：选择器1级文档对象返回值：匹配指定CSS选择器的第一个元素。如果没有找到，则返回null。如果指定了非法的选择器，将引发语法错误异常。例子

获取文档中id为“demo”的第一个元素：

P id='demo'id='demo' p元素/pp id='demo'id='demo' p元素/pp单击按钮修改id=' demo '/Pb button onclick=' my function()'的第一个p元素的内容单击me/button script function my function(){ document . queryselector(' demo ')。innerHTML='你好，世界！'；}/编写更多实例的脚本

1.获取文档中的第一个p元素：

这是一个p和一个元素。/pp这也是一个p和一个元素。/PP单击按钮修改文档中第一个p元素的背景颜色。/Pb button click=' my function()'单击me/button script function my function(){ document . queryselector(' p ')。style.backgroundcolor=' red}/script2，获取文档：中class='example '的第一个元素

h2p类=' example' class=' example '/段h2p类=' example ' class=' example '的标头。/p p p单击按钮为第一个class='example '元素添加背景色。/Pb button click=' my function()'单击me/button script function my function(){ document . queryselector('。示例')。style.backgroundcolor=' red}/script3，获取文档：中class='example '的第一个p元素

h2p类=' example' class=' example '/段h2p类=' example ' class=' example '的标头。/p p单击按钮，为class='example '的第一个p元素添加背景色。/Pb button click=' my function()'单击me/button script function my function(){ document . queryselector(' p . example ')。style.backgroundcolor=' red}/script4。获取文档中第一个具有“目标”属性的A元素：

！doctype html townleta charset=' utf-8 ' title we/title style a[target]{ background-color :黄色；}/style/head dyp CSS选择器a[target]确保所有带有target属性的链接的背景色为黄色：/pa href='//www . JB 51 . net ' jb51.net/aa href='//www .Disney.com ' target=' _ blank ' Disney.com/Aa href='//www . Wikipedia . org ' target=' _ top ' wikipedia.org/apClick点击按钮，为带有target属性的链接添加红色背景。/pbutton onclick='myFunction()'单击me/button script function my function(){ document . queryselector(' a[target])。style.border=' 10px纯红'；}/script/body/html5，下面的示例演示了如何使用多个选择器。假设您选择了两个选择器， h2和h3。以下代码为文档的第一个h2元素添加了背景色：

H2 h2元素/h2h3 h3元素/h3scriptdocument . queryselector(' H3 H2 ')。style.backgroundcolor=' red/script6。但是，如果h3元素位于文档中h2元素之前，h3元素将被设置为指定的背景颜色。

H3 h3元素/h3h2 h2元素/H2 script document . queryselector(' H3 H2 ')。style.backgroundcolor=' red/script7。通过获取选择的内容实现网址跳转

选择id='语言选择器'选项值=' cs ' esky/选项值=' en ' English/选项值=' es ' espa ol/选项值=' fr ' Fran ais/选项值=' jp '日本語/option选项值=' pl ' polski/option选项值=' pt ' portugus/option选项值=' zh ' selected中国的/option/选择脚本var lang=document。query selector(' # language-picker ')；lang.addEventListener('change ')，函数(e){ if(e . target。value==' en '){ window。位置='/'；} else { window。位置='/' e .目标。价值；} });/script我们小编提醒：因为ie8以上版本才支持querySelector，请大家酌情使用。