博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生JS实现的DOM操作笔记(草稿整理)
阅读量:7283 次
发布时间:2019-06-30

本文共 1551 字,大约阅读时间需要 5 分钟。

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

  • siblings:
  • addClass,removeClass,hasClass,toggleClass:

代码如下:

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

 

转载地址:http://lukjm.baihongyu.com/

你可能感兴趣的文章
设计模式之结构型模式—— 2.3 装饰模式
查看>>
Jquery Table 的基本操作
查看>>
Sublime如何解决中文乱码问题
查看>>
CCIE职业发展系列典型案列分析之RIPv2的认证
查看>>
如何监控正在运行的服务是否正常并且会邮件报警
查看>>
【NIO系列】——之IO模型
查看>>
listtree
查看>>
CCID: 2013-2014年度中国信息安全产品市场研究年度报告
查看>>
我的友情链接
查看>>
Ant入门基础教程
查看>>
nginx location
查看>>
js实现单例模式
查看>>
Android横竖屏切换的生命周期
查看>>
更新license
查看>>
com.microsoft.sqlserver.jdbc.SQLServerException: 不能将值 NULL 插入列 'ID'
查看>>
自定义的TableViewCell
查看>>
ProgressDialog的简单应用,等待提示
查看>>
使用dd命令切割文件
查看>>
linux必学的60个命令
查看>>
为什么我选择使用原型工具来代替纸原型
查看>>