[笔记]原生JS实现的DOM操作笔记

原生JS实现的DOM一系列操作参考：

• 原生JavaScript封装DOM库
• siblings: 原生JS-查找相邻的元素-siblings方法的实现
• addClass,removeClass,hasClass,toggleClass：原生js添加删除class
• 原生js添加删除class

代码如下：

var dom = {

    /** 功能说明：匹配元素是否含有指定class
     * @param el 指定的DOM元素
     * @param className 匹配的class名
     * */
    hasClass:function(el,className){
          return el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
    },

    /** 功能说明：给指定DOM元素添加class
     * @param el 指定的DOM元素
     * @param className 添加的class名
     * */
    addClass:function(el,className){
        if(!this.hasClass(el,className)){
            el.className += " " + className;
        }
        return el;
    },

    /** 功能说明：给指定DOM元素移除class
     * @param el 指定的DOM元素
     * @param className 移除的class名
     * */
    removeClass:function(el,className){
        if(this.hasClass(el,className)){
            var reg = new RegExp('(\\s|^)' + className +'(\\s|$)');
            el.className = el.className.replace(reg,' ')
        }
        return el;
    },

    /** 功能说明：给指定的DOM元素添加或者删除class
     * @param el 指定的DOM元素
     * @parm className 添加或删除的class名
     * */
    toggleClass:function(el,className){
        if(this.hasClass(el,className)){
            this.removeClass(el,className);
        }else{
            this.addClass(el,className);
        }
        return el;
    },

    /** 功能说明：获取当前元素的兄弟节点
     * @param el 当前DOM元素
     * */
    siblings:function(el){
        var matched = []; //存放兄弟节点
        var n = (el.parentNode || {}).firstChild;
        for(; n; n = n.nextSibling){
            if(n.nodeType === 1 && n !== el){
                matched.push(n);
            }
        }
        return matched;
    }
};

获得class：

function getByClass(oParent,sClass){
    if(oParent.getElementsByClassName){
        return oParent.getElementsByClassName(sClass);
    }else{
        var allEle = oParent.getElementsByTagName("*"),
            len = allEle.length,
            reg = new RegExp('(\\b)' + sClass + '(\\b)','i'),
            allReuslt = [],
            i;
        for( i=0; i < len; i ++){
            if(allEle[i].className.search(reg) != -1){
                allReuslt.push(allEle[i]);
            }
        }
        return allReuslt;
    }
}

获取样式：

function getStyle(ele,attr){
    var result = '';
    if(document.defaultView.getComputedStyle){
        result = document.defaultView.getComputedStyle(ele,false)[attr];
    }else{
        result = ele.currentStyle[attr];
    }
    if(attr == 'opacity'){
        return Math.round(parseFloat(result)*100);
    }else{
        return parseInt(result);
    }
}