JS的DOM方法封装库代码教程

由于使用原生JS写代码时，经常需要使用到DOM方法，需要获取各种节点，而且还要处理各浏览器的兼容性。于是封装一个自己的兼容各浏览器的DOM封装库就势在必行了

        var utils = (function(){
        var flag = "getComputedStyle" in window;

        function listToArray(arg){
            if(flag) {
                return Array.prototype.slice.call(arg);
            }else{
                var arr = [];
                for(var i = 0,len = arg.length; i < len; i++){
                    arr[i] = arg[i];
                }
                return arr;
            }
        }

        function getChildren(parentEl){
            if(flag){
                return this.listToArray(parentEl.children);
            }else{
                var childrenArr = [];
                var childList = parentEl.childNodes;
                for(var i = 0,len = childList.length; i < len; i++){
                    if(childList && childList[i].nodeType !== 1){
                        continue;
                    }else{
                        childrenArr.push(childList[i]);
                    }
                }
                return childrenArr;
            }
        }

        function prev(curEl){
            if(flag){
                return curEl.previousElementSibling;
            }else{
                var prevEl = curEl.previousSibling;
                while(prevEl && prevEl.nodeType !== 1){
                    prevEl = prevEl.previousSibling;    
                }
                return prevEl;
            }
        }

        function prevAll(curEl){
            var prevEl = this.prev(curEl);
            var prevArr = [];
            while(prevEl){
                prevArr.unshift(prevEl);
                prevEl = this.prev(prevEl);
            }
            return prevArr;
        }

        function next(curEl){
            if(flag){
                return curEl.nextElementSibling;
            }else{
                var nextEl = curEl.nextSibling;
                while(nextEl && nextEl.nodeType !== 1){
                    nextEl = nextEl.nextSibling;
                }
                return nextEl;
            }
        }

        function nextAll(curEl){
            var nextEl = this.next(curEl);
            var nextArr = [];
            while(nextEl){
                nextArr.push(nextEl);
                nextEl = this.next(nextEl);
            }
            return nextArr;
        }

        function sibling(curEl){
            var siblingArr = [];
            siblingArr.push(this.prev(curEl),this.next(curEl));
            return siblingArr;
        }

        function siblings(curEl){
            return this.prevAll(curEl).concat(this.nextAll(curEl));
        }

        function firstChild(parentEl){
            return this.getChildren(parentEl)[0];
        }

        function lastChild(parentEl){
            var len = this.getChildren(parentEl).length;
            return this.getChildren(parentEl)[len-1];
        }

        function index(curEl){
            return this.prevAll(curEl).length;
        }

        function appendChild(parentEl,newEl){
            parentEl.appendChild(newEl);
        }

        function prependChild(parentEl,newEl){
            var oldFirstChild = this.firstChild(parentEl);
            if(oldFirstChild){
                parentEl.insertBefore(newEl,oldFirstChild);
            }else{
                parentEl.appendChild(newEl);
            }
        }

        function insertBefore(newEl,oldEl){
            oldEl.parentNode.insertBefore(newEl,oldEl);
        }

        function insertAfter(newEl,oldEl){
            var oldNextEl = this.next(oldEl);
            if(oldNextEl){
                oldEl.parentNode.insertBefore(newEl,oldNextEl);
            }else{
                oldEl.parentNode.appendChild(newEl);
            }
        }

        function addClass(el,clName){   
            if(el.className){
                var classList = el.className;
                var reg = /(^\s+)|(\s+$)/g;
                classList = classList.replace(reg,'').split(' ');
                console.log(classList);
                for(var i = 0,len = classList.length; i < len; i++){
                    if(classList[i] === clName){
                        continue;
                    }else{
                        el.className += " " + clName;
                        //console.log(classList);
                    }
                }
            }else{
                el.className = clName;
            }   
        }

        function removeClass(el,clName){
            if(el.className){
                var classList = el.className;
                var reg = /(^\s+)|(\s+$)/g;        
                classList = classList.replace(reg,'').split(' ');
                for(var i = 0,len = classList.length; i < len; i++){
                    if(classList[i] === clName){
                        classList.splice(i,1);
                        el.className = classList;
                    }
                }
            }else{
                return ;
            }
        }

        function hasClass(el,clName){
            if(el.className){
                var reg = /(^\s+)|(\s+$)/g;
                var classList = el.className;
                classList = classList.replace(reg,'').split(' ');
                for(var i = 0,len = classList.length; i < len; i++){

                    if(classList[i] !== clName){
                        continue;
                    }else{
                        return true;
                    }
                }
            }else{
                return null;
            }
        }

        function setCss(el,styleName,styleValue){
            el.style[styleName] = styleValue;
        }

        function css(el,styleName,styleValue){
            if(arguments.length === 2){
                if(flag){
                    return el.style[styleName] || getComputedStyle(el,null)[styleName];
                }else{
                    return el.style[styleName] || el.currentStyle[styleName];
                }
            }else if(arguments.length === 3){
                this.setCss(el,styleName,styleValue);
            }
        }



        return {
            listToArray : listToArray,
            getChildren : getChildren,
            prev : prev,
            prevAll : prevAll,
            next : next,
            nextAll : nextAll,
            sibling : sibling,
            siblings : siblings,
            firstChild : firstChild,
            lastChild : lastChild,
            index : index,
            appendChild : appendChild,
            prependChild : prependChild,
            insertBefore : insertBefore,
            insertAfter : insertAfter,
            addClass : addClass,
            removeClass : removeClass,
            hasClass : hasClass,
            setCss : setCss,
            css : css
        }
    })();

该DOM封装库包含了开发中常用的方法并且处理了兼容性。在一些获取节点的方法里，需要注意的是：获取到的节点或节点数组需要用return将其返回，否则无法获取。