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