ASCII码 ASCII码

自定义方法通过类名获取对象集合

发布于：2022-05-31 13:44:46  栏目：技术文档

实例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .one {
  10.             width:300px;
  11.             height:300px;
  12.             background-color:red;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="one">hhhhhhhhh</div>
  18.     <div class="one three">eeeeeeeeeeee</div>
  19.     <div class="one two">llllllllllllll</div>
  20.     <div class="one two three">pppppppppppp</div>
  21.     <h3 class="one">11111111111111</h3>
  22.     <h3>2222222222222</h3>
  23.     <p class="one">33333333333333</p>
  24. </body>
  25. </html>
  27. <script>
  29. var ones = gclass("one");
  31. console.log(ones);
  33. for(var i = 0; i < ones.length; i++) {
  34.     ones[i].style.backgroundColor = "green";
  35. }
  37. // 通过类名获取所有元素的方法
  38. function gclass(className, tagName) {
  39.     // var alltags = document.all;
  40.     var alltags = document.getElementsByTagName(tagName || "*");
  41.     var arr = new Array();
  43.     for(let i = 0; i < alltags.length; i++) {
  44.         // one two
  45.         // split把一个字符串分割成字符串数组:
  46.         var one = className.split(" ");
  47.         var two = alltags[i].className.split(" ");
  49.         if(isHasArray(one, two)) {
  50.             arr[arr.length]  = alltags[i];
  51.         }
  52.     }
  54.     //返回所有类元素集合
  55.     return arr;
  56. }
  58. // 判断一个数组中的所有元素是否在另外的一个数组中存在
  59. function isHasArray(one, two) {
  60.     if(two.length < one.length){
  61.         return false;
  62.     }
  64.     var flag = 0;
  66.     for(let i=0; i<one.length; i++) {
  67.         for(let j=0; j<two.length; j++) {
  68.             if(one[i]==two[j]){
  69.                 flag++;
  70.                 break;
  71.             }
  72.         }
  73.     }
  75.     return flag == one.length;
  76. }
  78. </script>

结果展示

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行