querySelector

Posted zzq-229

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了querySelector相关的知识,希望对你有一定的参考价值。

querySelector



querySelector(css选择器)
通过css选择器去获取一个元素
它获取到的只有一个元素,如果说有重复的,那它只取第一个


 

querySelectorAll(css的选择器)
通过css选择器获取到一组元素
它获取到的也是一组元素,它也是一个类数组


 

querySelector例:

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script>
 7         
18             window.onload=function(){
19                 var red=document.querySelector(#color li:first-child);
20                     red.style.background=red;
21                 var ul=document.querySelector(.color2);
22                     ul.style.background=yellow;
23             };
24         </script>
25     </head>
26 
27     <body>
28         <ul id="color">
29             <li>red</li>
30             <li class="green">green</li>
31             <li>blue</li>
32             <li>yellow</li>
33             <li>pink</li>
34         </ul>
35         <ul class="color2">
36             <li>red</li>
37             <li class="green">green</li>
38             <li>blue</li>
39             <li>yellow</li>
40             <li>pink</li>
41         </ul>
42     </body>
43 
44 </html>

 






以上是关于querySelector的主要内容,如果未能解决你的问题,请参考以下文章

querySelector 不适用于 puppeteer 中的子元素

为啥JS代码“var a = document.querySelector('a[data-a=1]');”导致错误?

在节点上的函数内部运行方法

找不到带有 document.querySelector 的 atag 链接

JavaScript中 querySelector 与 getElementById 方法的区别

如何将条件反应与 document.querySelector 关联?