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

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

程序员文章站 2022-03-07 19:23:04
...

html代码

  1. <div class="one"> one </div>
  2. <br>
  3. <h1 class="three">three</h1>
  4. <form class="two" action="">
  5. <i class="two a" id="">two a</i><br>
  6. <b class="two b">two b</b><br>
  7. <b class="two">two</b><br>
  8. <b class="two c">two c</b><br>
  9. <b class="two d a c">two d a c</b><br>
  10. <string class="two e ">two e</string><br>
  11. <a href="javascript:;" class="three h" onclick="getClassNames()">点击获取</a>
  12. </form>

js代码

  1. function getClassName(tag ='', classNames='' ) {
  2. var returnTags=[];
  3. var tags;
  4. if(tag===''){
  5. tags = document.getElementsByTagName("*");
  6. }else {
  7. tags = document.getElementsByTagName(tag);
  8. }
  9. var c=classNames.split('|');
  10. if(c .length===1 && c[0]===''){
  11. alert('类名不能为空');
  12. return false
  13. }
  14. for (var i =0;i<tags.length;i++){
  15. var c1=tags[i].className.split(' ');
  16. if( c .length===1){
  17. //遍历每个标签
  18. c1.forEach(function (v,index) {
  19. if (v === c[0]) {
  20. returnTags.push(tags[i])
  21. }
  22. })
  23. }else {
  24. //遍历每个标签
  25. c1.forEach(function (v,index) {
  26. // 遍历每个需要查询的每个类名
  27. if(!returnTags.includes(tags[i])){
  28. c.forEach(function (value) {
  29. if(!returnTags.includes(tags[i])) {
  30. if (v === value) {
  31. returnTags.push(tags[i]);
  32. }
  33. }
  34. })
  35. }
  36. })
  37. }
  38. }
  39. return returnTags;
  40. }
  41. function getClassNames(){
  42. var tt = prompt('请输入查询的标签,全部标签请用*代替',"*");
  43. var cc = prompt('请输入查询的类名多个用 | 隔开,目前已定义的类名 one two three a b c d e ');
  44. console.log(getClassName(tt, cc));
  45. }