解决getElemenetsByClassName兼容问题

最新推荐文章于 2019-11-12 14:51:28 发布

翻译最新推荐文章于 2019-11-12 14:51:28 发布 · 714 阅读

知识点专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一个简单的HTML页面结构，并通过JavaScript实现了对页面中特定类名元素的获取与操作。展示了如何利用JavaScript内置方法document.getElementsByClassName来简化DOM操作。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
        </style>
    </head>
<body>
<div id="box1" class="weike a">1</div>
<div id="box2" class="weike">2</div>
<div id="box3" class="weike">3</div>
<div id="box4" class="weike">4</div>
<script type="text/javascript">

    function getClass(param){
        if(document.getElementsByClassName){
            return document.getElementsByClassName(param);
        }else{
            var allTag = document.getElementsByTagName("*");
            // console.log(allTag);
            var arr = [];
            for(var i=0;i<allTag.length;i++){
                var className = allTag[i].className;
                var arrClass =  className.split(" ");    //多个类名的处理  分割开  "xq a"  ["xq","a"]
                for(var j=0;j<arrClass.length;j++){
                    if(arrClass[j]==param){
                        arr.push(allTag[i]);
                    }
                }
            };
            return arr;
        };
    };
    var weike = getClass("a");
    console.log(weike[0].id);
</script>
</body>
</html>