<Javascript>理解DOMhelp.js_dom-helpers-CSDN博客

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里面才会用到

返回类型：undefined

css里面多个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或者false

10, getTarget

描述：获得事件目标

参数：触发的事件e

返回值：事件目标

e.target是对火狐等标准浏览器的用法，在ie里面事件e不再有效，有效的是window.event，自然，事件目标就被window.event.srcElement取代。while循环主要是针对safari，在safari里面，假如事件目标是一个链接，不把这个链接作为一个目标，而是把里面的文本节点作为一个目标。

11,stopBubble

描述：阻止事件冒泡

参数：触发的事件e

注意：stopPropagation不是IE的方法而是窗口事件中一个叫做cancelBubble中的属性preventDefault也不是IE的方法而是一个叫做returnValue的属性

12,stopDefault

描述：阻止默认事件的处理

参数：触发的事件e

window.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);