js获取指定类名的标签集合
程序员文章站
2022-03-24 09:31:12
...
html代码
<div class="one"> one </div>
<br>
<h1 class="three">three</h1>
<form class="two" action="">
<i class="two a" id="">two a</i><br>
<b class="two b">two b</b><br>
<b class="two">two</b><br>
<b class="two c">two c</b><br>
<b class="two d a c">two d a c</b><br>
<string class="two e ">two e</string><br>
<a href="javascript:;" class="three h" onclick="getClassNames()">点击获取</a>
</form>
js代码
function getClassName(tag ='', classNames='' ) {
var returnTags=[];
var tags;
if(tag===''){
tags = document.getElementsByTagName("*");
}else {
tags = document.getElementsByTagName(tag);
}
var c=classNames.split('|');
if(c .length===1 && c[0]===''){
alert('类名不能为空');
return false
}
for (var i =0;i<tags.length;i++){
var c1=tags[i].className.split(' ');
if( c .length===1){
//遍历每个标签
c1.forEach(function (v,index) {
if (v === c[0]) {
returnTags.push(tags[i])
}
})
}else {
//遍历每个标签
c1.forEach(function (v,index) {
// 遍历每个需要查询的每个类名
if(!returnTags.includes(tags[i])){
c.forEach(function (value) {
if(!returnTags.includes(tags[i])) {
if (v === value) {
returnTags.push(tags[i]);
}
}
})
}
})
}
}
return returnTags;
}
function getClassNames(){
var tt = prompt('请输入查询的标签,全部标签请用*代替',"*");
var cc = prompt('请输入查询的类名多个用 | 隔开,目前已定义的类名 one two three a b c d e ');
console.log(getClassName(tt, cc));
}
上一篇: WebStorm 配合 Cmder 或 Git Bash
下一篇: redux和react有啥区别