js 自定义获取指定类名的标签集合 - 大前端学习

首页 > 博客列表 > js 自定义获取指定类名的标签集合

博主信息

博文 21

粉丝 0

访问量 16893

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

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

中天行者

原创

762人浏览过

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <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>
    <script>
        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));
        }
    </script>
</body>
</html>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

鼠标悬停伪类的理解

2021-11-14 01:30:35