js--封装类名的dom操作

Posted _江江江江

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js--封装类名的dom操作相关的知识，希望对你有一定的参考价值。

dom操作中的getElementByClassName（）在ie6、7、8中具有兼容性问题，而在高级浏览器中就不存在这种问题。以下通过代码对getElementByClassName()的封装 。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 10px;
        }
    </style>
    <script>
        window.onload = function(){
            console.log(getClass("test").length);
        }
        function getClass(className){
            //如果浏览器支持着，则直接返回
            if(document.getElementsByClassName){
                return document.getElementsByClassName(className);
            }
            //不支持的浏览器
            var  arr = [];
            var dom = document.getElementsByTagName("*");

            for(var i=0; i < dom.length; i++){
//                if(dom[i].className == className){
//                    arr.push(dom[i]);
//                }i
                //改进后的class

                var  txt = dom[i].split(" ");//["dome","test"]
                for(var j=0; j < txt.length; j++){
                    if(txt[j] == className){
                        arr.push(dom[i]);
                    }
                }
            }
            return arr;
        }

        /*
        原理，遍历所有的div。通过每个div的className来判断
         */
    </script>
</head>
<body>

</body>
<div class="dome"></div>
<div></div>
<div class="test"></div>
<div></div>
<div class="dome test"></div>
<div></div>
<div></div>
<div></div>
<div class="dome"></div>
<div></div>
</html>

　　

以上是关于js--封装类名的dom操作的主要内容，如果未能解决你的问题，请参考以下文章

05-DOM操作练习：访问关系的封装

Javascript DOM封装方法汇总

回归 | js实用代码片段的封装与总结（持续更新中...）

原生JS实现的DOM操作笔记（草稿整理）

JS高程3：DOM-DOM操作技术

ES6 - 原生js遍历DOM - document.querySelectorAll(‘.xx‘)给DOM元素添加删除类名 - dom.classList.add切换类名toggle