理解DOMhelp.js

DOMhelp.js是瀏覽器對dom不同操作封裝在了一個對象DOMhelp裡面，儘可能達到跨瀏覽器。有以下方法：1，firstSibling描述：獲得他的第一個兄弟節點（元素節點）參數：node (當前節點)傳回型別：節點html頁面中的斷行符號分行符號也算是一個文本節點，tempObj.nodeType!=1是要求必須是元素節點，而tempObj.nextSibling!=null是為了防止當前節點就是第一個。2,lastSibling描述：獲得他的第最後一個兄弟節點（元素節點）參數：node (當前節點)傳回型別：節點3,closestSibling描述：獲得離他最近的兄弟元素節點參數：node (當前節點)，direction（方向 1->下一個 -1->上一個）傳回型別：節點一樣要進行判斷是否是元素節點，是否有上一個或者下一個相鄰的節點。4,cssjs描述：以js來實現css類的替換，添加，刪除，檢查參數：a 對屬性的操作 一個四個 'swap'->替換'add'->添加 'remove'->刪除'check'->檢查o 操作的元素節點對象c1 操作的css類的名字c2 替換的css類的名字 只有在replace裡面才會用到 傳回型別：undefinedcss裡面多個class可以通過空格分開而讓一個元素擁有幾個類，如：<div class = "a b cd"></div>這個方法就是針對這種css類的操作，增刪改檢查case 'swap':o.className=!DOMhelp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);break;case 'add':if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className?''+c1:c1;}break;case 'remove':var rep=o.className.match(' '+c1)?' '+c1:c1;o.className=o.className.replace(rep,'');break;case 'check':var found=false;var temparray=o.className.split(' ');for(var i=0;i<temparray.length;i++){if(temparray[i]==c1){found=true;}}return found;5,addEvent 描述：為elm添加一個事件監聽參數：elm(所要添加事件監聽的對象) evType（監聽的事件類型）fn（事件處理方法 事件監聽器）useCapture（Boolean 是否捕獲事件）elm.addEventListener這個是為Mozilla, Netscape,Firefox準備的，elm.attachEvent這個是IE的特有的方法，而最後的是全部都可以用的。6,createLink描述：建立一個連結，連結的文本為txt，連結到to參數：to（你要連結到那個地方去），txt（連結的文本）傳回值：形成的連結化物件（<ahref="to">txt</a>）7,createTextElm描述：建立一個元素，包含所給的文本參數：elm(建立的元素),txt（包含的文本）傳回值：形成的對象（<elm>txt</elm>）8,getText描述：得到node裡面的文本參數：node(對象)傳回值：文本的值 或者false得到文本的內容，必須先找到文本節點，所以需迴圈找，確認tempObj.nodeType ==3後還要考慮尋找過程裡可能出錯的地方；同時html裡面的斷行符號和換行都看成是文本節點，也要進行排除/^\s+$/匹配所有的空白字元9,setText描述：設定node裡面的文本為txt參數：node(對象)  txt（設定成什麼文本）傳回值：NULL或者false10, getTarget描述：獲得 事件目標參數：觸發的事件e傳回值： 事件目標e.target是對Firefox等標準瀏覽器的用法，在ie裡面事件e不再有效，有效是window.event，自然，事件目標就被window.event.srcElement取代。while迴圈主要是針對safari，在safari裡面，假如事件目標是一個連結，不把這個連結作為一個目標，而是把裡面的文本節點作為一個目標。11,stopBubble描述：阻止事件冒泡參數：觸發的事件e注意：stopPropagation不是IE的方法而是視窗事件中一個叫做cancelBubble中的屬性preventDefault也不是IE的方法而是一個叫做returnValue的屬性12,stopDefault描述：阻止預設事件的處理參數：觸發的事件ewindow.event &&window.event.returnValue，顯然是針對ie而言的，其他就是針對其他的一些瀏覽器。阻止預設事件。
源碼如下：

DOMhelp={debugWindowId:'DOMhelpdebug',init:function(){if(!document.getElementByIdx_x || !document.createTextNode){return;}},lastSibling:function(node){var tempObj=node.parentNode.lastChild;while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){tempObj=tempObj.previousSibling;}return (tempObj.nodeType==1)?tempObj:false;},firstSibling:function(node){var tempObj=node.parentNode.firstChild;while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){tempObj=tempObj.nextSibling;}return (tempObj.nodeType==1)?tempObj:false;},getText:function(node){if(!node.hasChildNodes()){return false;}var reg=/^\s+$/;var tempObj=node.firstChild;while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){tempObj=tempObj.nextSibling;}return tempObj.nodeType==3?tempObj.nodeValue:false;},setText:function(node,txt){if(!node.hasChildNodes()){return false;}var reg=/^\s+$/;var tempObj=node.firstChild;while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){tempObj=tempObj.nextSibling;}if(tempObj.nodeType==3){tempObj.nodeValue=txt}else{return false;}},createLink:function(to,txt){var tempObj=document.createElement_x('a');tempObj.appendChild(document.createTextNode(txt));tempObj.setAttribute('href',to);return tempObj;},createTextElm:function(elm,txt){var tempObj=document.createElement_x(elm);tempObj.appendChild(document.createTextNode(txt));return tempObj;},closestSibling:function(node,direction){var tempObj;if(direction==-1 && node.previousSibling!=null){tempObj=node.previousSibling;while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){tempObj=tempObj.previousSibling;}}else if(direction==1 && node.nextSibling!=null){tempObj=node.nextSibling;while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){tempObj=tempObj.nextSibling;}}return tempObj.nodeType==1?tempObj:false;},initDebug:function(){if(DOMhelp.debug){DOMhelp.stopDebug();}DOMhelp.debug=document.createElement_x('div');DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);document.body.insertBefore(DOMhelp.debug,document.body.firstChild);},setDebug:function(bug){if(!DOMhelp.debug){DOMhelp.initDebug();}DOMhelp.debug.innerHTML+=bug+'\n';},stopDebug:function(){if(DOMhelp.debug){DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);DOMhelp.debug=null;}},getKey:function(e){if(window.event){     var key = window.event.keyCode;   } else if(e){     var key=e.keyCode;   }return key;},getTarget:function(e){var target = window.event ? window.event.srcElement : e ? e.target : null;if (!target){return false;}while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){target=target.parentNode;}return target;},stopBubble:function(e){if(window.event && window.event.cancelBubble){window.event.cancelBubble = true;} if (e && e.stopPropagation){e.stopPropagation();}},stopDefault:function(e){if(window.event && window.event.returnValue){window.event.returnValue = false;} if (e && e.preventDefault){e.preventDefault();}},cancelClick:function(e){if (window.event){window.event.cancelBubble = true;window.event.returnValue = false;}if (e && e.stopPropagation && e.preventDefault){e.stopPropagation();e.preventDefault();}},addEvent: function(elm, evType, fn, useCapture){if (elm.addEventListener){elm.addEventListener(evType, fn, useCapture);return true;} else if (elm.attachEvent) {var r = elm.attachEvent('on' + evType, fn);return r;} else {elm['on' + evType] = fn;}},cssjs:function(a,o,c1,c2){switch (a){case 'swap':o.className=!DOMhelp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);break;case 'add':if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}break;case 'remove':var rep=o.className.match(' '+c1)?' '+c1:c1;o.className=o.className.replace(rep,'');break;case 'check':var found=false;var temparray=o.className.split(' ');for(var i=0;i<temparray.length;i++){if(temparray[i]==c1){found=true;}}return found;break;}},    safariClickFix:function(){      return false;    }}DOMhelp.addEvent(window, 'load', DOMhelp.init, false);