document.querySelectorAll使用心得[日常]

(゜-゜)つロ 干杯~

以前分享过一片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="http://www.hibbba.com/">贝贝吧</a>  
  9.     <a href="http://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。

   

如果资源下载失效请到 留言板 留言或者 QQ 联系我。

本站默认解压密码:www.hibbba.com

(゜-゜)つロ 干杯~
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: