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