以前分享过一片MDN接口的文章，最近没事干深入学习了下，querySelectorAll是MDN里的一个接口但功能相当强大。
HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。
可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

获取文档中id=”container”的元素

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <div id=“contatiner”>huang</div>  
  9.     <script type=“text/javascript”>  
  10.         var destination = document.querySelectorAll(“#contatiner”)[0];  
  11.         console.log(destination);  
  12.     </script>  
  13. </body>  
  14. </html>  

获取第一个p元素

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <p>韦贝贝</p>  
  9.     <p>贝贝吧</p>  
  10.   
  11.     <script type=“text/javascript”>  
  12.     var node = document.querySelectorAll(“p”)[0];  
  13.         console.log(node);  
  14.     </script>  
  15. </body>  
  16. </html>  

获取文档中的第一个class=”lover”的元素

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <span class=“lover”>韦贝贝</span>  
  9.     <span class=“lover”>贝贝吧</span>  
  10.   
  11.     <script type=“text/javascript”>  
  12.     var node = document.querySelectorAll(“.lover”)[0];  
  13.         console.log(node);  
  14.     </script>  
  15. </body>  
  16. </html>  

获取class=”lover” 的第一个p元素

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <span class=“lover”>贝贝吧</span>  
  9.     <p class=“lover”>韦贝贝</p>  
  10.   
  11.     <script type=“text/javascript”>  
  12.     var node = document.querySelectorAll(“p.lover”)[0];  
  13.         console.log(node);  
  14.     </script>  
  15. </body>  
  16. </html>  

获取第一个带target属性的a元素

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <a href=“https://www.hibbba.com/”>贝贝吧</a>  
  9.     <a href=“https://www.hibbba.com/sponsor.html” target=“_blank”>打赏一下</a>  
  10.   
  11.     <script type=“text/javascript”>  
  12.     var node = document.querySelectorAll(“a[target]”)[0];  
  13.         console.log(node);  
  14.     </script>  
  15. </body>  
  16. </html>  

多个选择器的使用方法

以下代码将为文档的第一个< h2 >元素添加背景颜色：

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <h2>二级标题</h2>  
  9.     <h3>三级标题</h3>  
  10.     <script type=“text/javascript”>  
  11.         document.querySelectorAll(“h2,h3”)[0].style.backgroundColor = “blue”;  
  12.     </script>  
  13. </body>  
  14. </html>  

正则表达式

[id^=’someId’]将匹配以开头的所有ID someId。

[id$=’someId’]将匹配所有以结尾的ID someId。

[id*=’someId’]将匹配所有包含的ID someId。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系贝贝进行处理。
本站默认解压密码：www.hibbba.com