欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

js 自定义获取指定类名的标签集合

程序员文章站 2022-03-03 21:54:25
...
    

  1. <!DOCTYPE html>
    2. 

  2. <!DOCTYPE html>
    3. 

  3. <html lang="en">
    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8">
    6. 

  6.     <title>Title</title>
    7. 

  7. </head>
    8. 

  8. <body>
    9. 

  9.     <div class="one"> one </div>
    10. 

  10.     <br>
    11. 

  11.     <h1 class="three">three</h1>
    12. 

  12.     <form class="two" action="">
    13. 

  13.         <i class="two a"  id="">two a</i><br>
    14. 

  14.         <b class="two b">two b</b><br>
    15. 

  15.         <b class="two">two</b><br>
    16. 

  16.         <b class="two c">two c</b><br>
    17. 

  17.         <b class="two d a c">two d a c</b><br>
    18. 

  18.         <string class="two e ">two e</string><br>
    19. 

  19.             <a href="javascript:;" class="three h" onclick="getClassNames()">点击获取</a>
    20. 

  20.     </form>
    21. 

  21.     <script>
    22. 

    23. 

  23.         function getClassName(tag ='', classNames='' ) {
    24. 

  24.             var returnTags=[];
    25. 

  25.             var tags;
    26. 

  26.             if(tag===''){
    27. 

  27.                 tags = document.getElementsByTagName("*");
    28. 

  28.             }else {
    29. 

  29.                 tags = document.getElementsByTagName(tag);
    30. 

  30.             }
    31. 

  31.             var c=classNames.split('|');
    32. 

  32.             if(c .length===1 && c[0]===''){
    33. 

  33.                 alert('类名不能为空');
    34. 

  34.                 return false
    35. 

  35.             }
    36. 

  36.             for (var i =0;i<tags.length;i++){
    37. 

  37.                 var c1=tags[i].className.split(' ');
    38. 

  38.                 if( c .length===1){
    39. 

  39.                     //遍历每个标签
    40. 

  40.                     c1.forEach(function (v,index) {
    41. 

  41.                          if (v === c[0]) {
    42. 

  42.                             returnTags.push(tags[i])
    43. 

  43.                          }
    44. 

  44.                      })
    45. 

  45.                 }else {
    46. 

  46.                     //遍历每个标签
    47. 

  47.                     c1.forEach(function (v,index) {
    48. 

  48.                         // 遍历每个需要查询的每个类名
    49. 

  49.                         if(!returnTags.includes(tags[i])){
    50. 

  50.                             c.forEach(function (value) {
    51. 

  51.                                 if(!returnTags.includes(tags[i])) {
    52. 

  52.                                     if (v === value) {
    53. 

  53.                                         returnTags.push(tags[i]);
    54. 

  54.                                     }
    55. 

  55.                                 }
    56. 

  56.                             })
    57. 

  57.                         }
    58. 

    59. 

    60. 

  60.                     })
    61. 

  61.                 }
    62. 

    63. 

  63.             }
    64. 

  64.             return returnTags;
    65. 

  65.         }
    66. 

  66.         function getClassNames(){
    67. 

  67.             var tt =  prompt('请输入查询的标签,全部标签请用*代替',"*");
    68. 

  68.             var cc =  prompt('请输入查询的类名多个用 | 隔开,目前已定义的类名 one two three a b c d e ');
    69. 

  69.             console.log(getClassName(tt, cc));
    70. 

  70.         }
    71. 

    72. 

  72.     </script>
    73. 

  73. </body>
    74. 

  74. </html>
    75.

上一篇： 一个可编辑的表格 双击进行编辑,回车确认编辑内容,如果不回车确认.那么恢复原来的值

下一篇： 用cookie实现简单的用户自定义页面样式

推荐阅读