码迷,mamicode.com
首页 > Web开发 > 详细

原生JS实现的DOM操作笔记(草稿整理)

时间:2018-03-09 18:01:40      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:javascrip   his   blog   tao   tno   lan   草稿   []   get   

原生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;
    }
};

 

原生JS实现的DOM操作笔记(草稿整理)

标签:javascrip   his   blog   tao   tno   lan   草稿   []   get   

原文地址:https://www.cnblogs.com/moqiutao/p/8534779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!