• 【笔记】原生JS实现的DOM操作


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

    代码如下:

    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);
        }
    }
  • 相关阅读:
    Qt笔记之 信号和槽
    Qt笔记之 坐标系
    Qt笔记之 QPushButton
    点双连通
    bzoj 2179 FFT快速傅立叶
    bzoj 4128 矩阵求逆
    bzoj 3924 点分
    bzoj 1076 状态压缩最优期望
    bzoj 3143 随机游走
    bzoj 4084 双旋转字符串
  • 原文地址:https://www.cnblogs.com/moqiutao/p/8534779.html
Copyright © 2020-2023  润新知