由于使用原生JS写代码时,经常需要使用到DOM方法,需要获取各种节点,而且还要处理各浏览器的兼容性。于是封装一个自己的兼容各浏览器的DOM封装库就势在必行了
var utils = (function(){
var flag = "getComputedStyle" in window;
function listToArray(arg){
if(flag) {
return Array.prototype.slice.call(arg);
}else{
var arr = [];
for(var i = 0,len = arg.length; i < len; i++){
arr[i] = arg[i];
}
return arr;
}
}
function getChildren(parentEl){
if(flag){
return this.listToArray(parentEl.children);
}else{
var childrenArr = [];
var childList = parentEl.childNodes;
for(var i = 0,len = childList.length; i < len; i++){
if(childList && childList[i].nodeType !== 1){
continue;
}else{
childrenArr.push(childList[i]);
}
}
return childrenArr;
}
}
function prev(curEl){
if(flag){
return curEl.previousElementSibling;
}else{
var prevEl = curEl.previousSibling;
while(prevEl && prevEl.nodeType !== 1){
prevEl = prevEl.previousSibling;
}
return prevEl;
}
}
function prevAll(curEl){
var prevEl = this.prev(curEl);
var prevArr = [];
while(prevEl){
prevArr.unshift(prevEl);
prevEl = this.prev(prevEl);
}
return prevArr;
}
function next(curEl){
if(flag){
return curEl.nextElementSibling;
}else{
var nextEl = curEl.nextSibling;
while(nextEl && nextEl.nodeType !== 1){
nextEl = nextEl.nextSibling;
}
return nextEl;
}
}
function nextAll(curEl){
var nextEl = this.next(curEl);
var nextArr = [];
while(nextEl){
nextArr.push(nextEl);
nextEl = this.next(nextEl);
}
return nextArr;
}
function sibling(curEl){
var siblingArr = [];
siblingArr.push(this.prev(curEl),this.next(curEl));
return siblingArr;
}
function siblings(curEl){
return this.prevAll(curEl).concat(this.nextAll(curEl));
}
function firstChild(parentEl){
return this.getChildren(parentEl)[0];
}
function lastChild(parentEl){
var len = this.getChildren(parentEl).length;
return this.getChildren(parentEl)[len-1];
}
function index(curEl){
return this.prevAll(curEl).length;
}
function appendChild(parentEl,newEl){
parentEl.appendChild(newEl);
}
function prependChild(parentEl,newEl){
var oldFirstChild = this.firstChild(parentEl);
if(oldFirstChild){
parentEl.insertBefore(newEl,oldFirstChild);
}else{
parentEl.appendChild(newEl);
}
}
function insertBefore(newEl,oldEl){
oldEl.parentNode.insertBefore(newEl,oldEl);
}
function insertAfter(newEl,oldEl){
var oldNextEl = this.next(oldEl);
if(oldNextEl){
oldEl.parentNode.insertBefore(newEl,oldNextEl);
}else{
oldEl.parentNode.appendChild(newEl);
}
}
function addClass(el,clName){
if(el.className){
var classList = el.className;
var reg = /(^\s+)|(\s+$)/g;
classList = classList.replace(reg,'').split(' ');
console.log(classList);
for(var i = 0,len = classList.length; i < len; i++){
if(classList[i] === clName){
continue;
}else{
el.className += " " + clName;
//console.log(classList);
}
}
}else{
el.className = clName;
}
}
function removeClass(el,clName){
if(el.className){
var classList = el.className;
var reg = /(^\s+)|(\s+$)/g;
classList = classList.replace(reg,'').split(' ');
for(var i = 0,len = classList.length; i < len; i++){
if(classList[i] === clName){
classList.splice(i,1);
el.className = classList;
}
}
}else{
return ;
}
}
function hasClass(el,clName){
if(el.className){
var reg = /(^\s+)|(\s+$)/g;
var classList = el.className;
classList = classList.replace(reg,'').split(' ');
for(var i = 0,len = classList.length; i < len; i++){
if(classList[i] !== clName){
continue;
}else{
return true;
}
}
}else{
return null;
}
}
function setCss(el,styleName,styleValue){
el.style[styleName] = styleValue;
}
function css(el,styleName,styleValue){
if(arguments.length === 2){
if(flag){
return el.style[styleName] || getComputedStyle(el,null)[styleName];
}else{
return el.style[styleName] || el.currentStyle[styleName];
}
}else if(arguments.length === 3){
this.setCss(el,styleName,styleValue);
}
}
return {
listToArray : listToArray,
getChildren : getChildren,
prev : prev,
prevAll : prevAll,
next : next,
nextAll : nextAll,
sibling : sibling,
siblings : siblings,
firstChild : firstChild,
lastChild : lastChild,
index : index,
appendChild : appendChild,
prependChild : prependChild,
insertBefore : insertBefore,
insertAfter : insertAfter,
addClass : addClass,
removeClass : removeClass,
hasClass : hasClass,
setCss : setCss,
css : css
}
})();
该DOM封装库包含了开发中常用的方法并且处理了兼容性。在一些获取节点的方法里,需要注意的是:获取到的节点或节点数组需要用return将其返回,否则无法获取。