脚本宝典收集整理的这篇文章主要介绍了js实例教程-JS的DOM方法封装库代码教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
由于使用原生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将其返回，否则无法获取。
由于使用原生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将其返回，否则无法获取。
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-JS的DOM方法封装库代码教程全部内容，希望文章能够帮你解决js实例教程-JS的DOM方法封装库代码教程所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。