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

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的原生JS实现的DOM操作笔记（草稿整理）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。