Javascript DOM封装方法汇总

一：在页面上增加类和删除类的方法：

增加类：传两个参数 节点和类名 方法如下：

1. function addClass(obj,className){  
2.         obj.className+=" " +className;    
3.         return obj;  
4.     } 

删除类 也是传两个参数 节点和类名 然后获取该节点的所有类名并且用正则表达式 用空格把他们隔开 然后一个for循环 判断当前的任何一个类名 是不是和我当前的传的参数类名 是不是相同 如果是相同的话 就删掉 最后返回该对象！代码如下：

1. function delClass(obj,className){  
2.         var s = obj.className.split(/\s+/);//正则把类名分开  
3.         for(var i=0;i<s.length;i++){  
4.             if(s[i]==className){  
5.                 delete s[i];      
6.             }     
7.         }  
8.         obj.className = s.join(" ");  
9.         return obj;  
10.     } 

二：简单的用try{}catch(e){}语句写个收藏夹：

代码如下：

1. <a href="javascript:void(0)" onclick="addFav()">aaaaa</a> 
2.     <script> 
3.         //把相应网址添加到收藏夹里面去  
4.         //IE的方式是：window.external.addFavorite(sUrl,sTitle);  
5.         //火狐的方式是:window.sidebar.addPanel(sTitle,sUrl,"");  
6.         //IE和火狐分别实现了自己的添加到收藏夹的方式 其中address是页面的网址 name是页面的标题  
7.         //可以写个简单的函数来判断  
8.           
9.           
10.         function addFav(){  
11.             try{  
12.                 window.sidebar.addPanel("百度","http://www.baidu.com",""); //火狐的  
13.             }catch(e){  
14.                 try{  
15.                     window.external.addFavorite("http://www.baidu.com","百度"); //IE的  
16.                 }catch(e){  
17.                 }  
18.             }     
19.         }  
20.     </script> 

三 跨游览器事件：

1. function addEvent(obj,evt,fn,userCape){  
2.         if(obj.addEventListener){  
3.             obj.addEventListener(evt,fn,false);   
4.         }else{  
5.             obj.attachEvent("on"+evt,function(){  
6.                 fn.call(obj);     
7.             });   
8.         }     
9.     }  
10.     function delEvent(obj,evt,fn,userCape){  
11.         if(obj.removeEventListener){  
12.             obj.removeEventListener(evt,fn,false);    
13.         }else{  
14.             obj.detachEvent("on"+evt,fn);     
15.         }     
16.     }  
17.     function fixEvt(evt){  
18.         evt = evt || window.event;  
19.         if(!evt.target){  // IE下  
20.             evt.target = evt.srcElement;  
21.             evt.layerX = evt.offsetX;  
22.             evt.layerY = evt.offsetY;  
23.             evt.stopPropagation = function(){  
24.                 this.cancelBubble = true;     
25.             }     
26.         }     
27.         return evt;  
28.     }  
29. </script> 

特别注意上面的attachEvent这个方法 千万不要写成这样的 attachEvent(obj,"on"+evt,fn),如果写成这样的话 那么函数fn（如果你用this的话 那么函数内的this就指向与window）所以这也是个IEbug 因为我们是想要该函数this指向与当前实例化对象 所以我们要改成这样的方式:attachEvent(obj,"on"+evt,function(){fn.call(obj)});用当前的函数调用该对象 那么该函数的指针就指向与该对象！这个地方要注意点！虽然改了后 this也是指向与对象的！但是用这个函数也要注意一个地方 如果用attachEvent(obj,"on"+evt,function(){fn.call(obj)}); 这个方法在IE下 注册三个同样的函数 三个同样的事件的话 那么在IE下 你点击一下元素的话 他们会同时触发三个事件 而在火狐下只会触发一个事件 所以用这个函数在IE下 也并不是说没有bug 但是用这个函数注册事件的话  一般情况下是没有什么问题的  但是这个也是我们要注意的地方！如果要修改下这个bug话 也并不是说不能改 只是要写个更复杂的函数来判断下 就是在页面上判断当前函数及事件是不是在页面上已经注册了 如果注册了 那么我们就返回！但是这个函数比较复杂 所以也没有去研究！不过用上面的那种方式一般情况下足够了！

四：滚动的文字：

在有的网站上我们经常看到title有文字滚动的效果：其实这个用js来实现也是一件非常简单的事情！其实这个和在页面上实现滚动是一样的道理 首先我们用document.title就可以获取该对象内容 接着我们只做两件事情 第一用字符串分开 第二把第一个文字放到最后去

代码如下：

1. <button id="oStart">开始</button>  
2.     <button id="oEnd">结束</button>  
3.   <!--  <script>  
4.         function $(id){  
5.             return document.getElementById(id);   
6.         }  
7.         var start = $("oStart"),  
8.             end = $("oEnd");  
9.         var flag; //用flag有个问题 就是不能清除缓存 当我点击停止时候 等一段时间后 再点击开始 文字会滚动的很快   
10.             addEvent(start,'click',scroll);  
11.             addEvent(end,'click',stop);  
12.             function scroll(){  
13.                 flag = true;  
14.                 var s = document.title.split("");  
15.                 setInterval(function(){  
16.                     if(flag){  
17.                         s.push(s.shift());    
18.                         document.title = s.join("");      
19.                     }  
20.             },300);  
21.             this.disabled = true; //点击后 让按钮成为不可以点击的状态  
22.             end.disabled = false; //让结束按钮成为可以点击的状态  
23.         }  
24.       
25.         function stop(){  
26.             flag = false;     
27.             start.disabled = false;  
28.             this.disabled = true;  
29.         }  
30.           
31.         function addEvent(obj,evt,fn,userCape){  
32.             if(obj.addEventListener){  
33.                 obj.addEventListener(evt,fn,false);   
34.             }else{  
35.                 obj.attachEvent("on" + evt,function(){  
36.                     fn.call(obj);     
37.                 })    
38.             }     
39.         }  
40.     </script> --> 

上面代码 在页面上给了两个按钮 当我点击开始时候 文字就开始滚动 当点击结束时候 文字就停止滚动！然后点击后 在相应的按钮上设置成不可点击状态！上面的函数用了一个变量flag 判断如果是true的话  用setInterval执行这个函数 但是用flag有个bug 就是不能清除游览器的缓存 就是当我点击停止按钮后 再点击开始时候 文字会滚动的很快！这样的效果并不是我们想要的！

所以我们可以接着继续写代码：

1. function $(id){  
2.             return document.getElementById(id);   
3.         }  
4.         var start = $("oStart"),  
5.             end = $("oEnd");  
6.             var t;  
7.             addEvent(start,'click',scroll);  
8.             addEvent(end,'click',stop);   
9.             function scroll(){  
10.                 var s = document.title.split("");  
11.                 clearInterval(t);  
12.                  t = setInterval(function(){  
13.                     s.push(s.shift());    
14.                     document.title = s.join("");      
15.             },300);  
16.         }  
17.       
18.         function stop(){  
19.             clearInterval(t); //用这种方式就可以清除缓存 但是还存在另一个问题 就是说假如我点击多次开始按钮时候 它还会执行上面的代码setInterval这段代码  
20.             // 而现在我执行结束按钮时候 结束不掉 ！所以我们要做他们执行setIvterval之前要clearInterval清除一次  
21.         }  
22.           
23.         function addEvent(obj,evt,fn,userCape){  
24.             if(obj.addEventListener){  
25.                 obj.addEventListener(evt,fn,false);   
26.             }else{  
27.                 obj.attachEvent("on" + evt,function(){  
28.                     fn.call(obj);     
29.                 })    
30.             }     
31.         }  
32.     </script> 

代码如上所示！

下面我们就在文档中写个简单的文字滚动 当然是用面向对象的方式来写个函数 代码如下：

1. <!-- 上面实现标题文字滚动没有多大意思 下面实现段落或者div中的文字滚动--> 
2.    <p id="op">aaaaaa</p> 
3.   <script> 
4.      function $(id){  
5.         return document.getElementById(id);   
6.     }  
7.     obj = $("op");  
8.     var oStart = $("oStart");  
9.     var oEnd = $("oEnd");  
10.     function addEvent(obj,evt,fn,userCape){  
11.             if(obj.addEventListener){  
12.                 obj.addEventListener(evt,fn,false);   
13.             }else{  
14.                 obj.attachEvent("on" + evt,function(){  
15.                     fn.call(obj);     
16.                 })    
17.             }     
18.         }  
19.      var test;  
20.     /* function scrollText(text,fn,t){  
21.         test = text.split("");  
22.         setInterval(function(){  
23.             test.push(test.shift());  
24.             fn(test.join(""));  
25.         },t)      
26.     } */  //这种方式可以 但是如果我想要和上面一样 能有控制按钮  那么我们现在可以使用下面面向对象方法来解决  
27.     function ScrollText(s,fn,t){  
28.         this.s = s.split("");  
29.         this.fn = fn;  
30.         tthis.t = t || 500;    
31.     }  
32.     ScrollText.prototype = {  
33.         start : function(){  
34.             clearInterval(this.interval);  
35.             var s = this.s,fn = this.fn;  
36.             this.interval = setInterval(function(){  
37.                 s.push(s.shift());  
38.                 fn(s.join(""));   
39.             },this.t);  
40.         },  
41.         stop : function(){  
42.             clearInterval(this.interval);     
43.         }     
44.     }  
45.     var sss = new ScrollText("要滚动的文字",function(g){  
46.         obj.innerHTML = g;  
47.     },1000);  
48.     oStart.onclick = function(){  
49.         sss.start();      
50.     };  
51.     oEnd.onclick = function(){  
52.         sss.stop()    
53.     }; 

上面就是用了个简单的面向对象的方式写了个简单的函数！
 

五：获取类名封装(getElementsByClassName)

在用js时候 我们经常要用到获取类名的方法！但是我们原审js是没有这个方法的 当然不用js框架情况下 那么我们可以简单的用函数封装一个！但是封装这个函数之前 我们要考虑先写个简单的函数 就是hasClass()这个方法 这个方法就是判断当前的页面有没有这个类 这个方法也是为获取类名做好准备的 首先我们肯定要判断当前的页面有没有这个类名 如果有的话 我就获取它！下面是hasClass()方法

1. //检查有没有类  
2.     function hasClass(node,className){  
3.         var names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开     
4.         //遍历这个类名  
5.         for(var i=0;i<names.length;i++){  
6.             if(names[i]==className)  
7.                 return true;      
8.             }  
9.             return false;     
10.         } 

下面是获取类名的代码：

1. function getElementsByClassName(className,context){  
2.     context = context || document;  
3.     if(context.getElementsByClassName){  
4.         return context.getElementsByClassName(className);     
5.     }  
6.     var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点  
7.     for(var i=0;i<nodes.length;i++){   //遍历所有的节点  
8.         if(hasClass(nodes[i],className)) ret.push(nodes[i]);  
9.     }     
10.     return ret;  
11. }  

获取类名的代码 和我那个相比简单很多 只是传了两个参数 一个是类名 还有一个当前的上下文！默认情况下文档document ！代码也比较简洁！

下面是所有代码一起贴上来吧！

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
5. <title>无标题文档</title> 
6. <style> 
7. #oDiv{ width:200px; height:200px; background:#900; position:relative; top:150px; left:150px;}  
8. </style> 
9. </head> 
10.  
11. <body> 
12. <div class="oDiv"> 
13.     <p><a>aaa</a></p> 
14.     <div></div> 
15. </div> 
16.  
17. <script> 
18.     function getElementsByClassName(className,context){  
19.         contextcontext = context || document;  
20.         if(context.getElementsByClassName){  
21.             return context.getElementsByClassName(className);     
22.         }  
23.         var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点  
24.         for(var i=0;i<nodes.length;i++){   //遍历所有的节点  
25.             if(hasClass(nodes[i],className)) ret.push(nodes[i]);  
26.         }     
27.         return ret;  
28.     }  
29.       
30. //检查有没有类  
31.     function hasClass(node,className){  
32.         var names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开     
33.         //遍历这个类名  
34.         for(var i=0;i<names.length;i++){  
35.             if(names[i]==className)  
36.                 return true;      
37.             }  
38.             return false;     
39.         }  
40.           
41. //获取元素的第一个子节点  js本来是有获取第一个子节点的方法 但是获取时候会把空白 其他字符也当作节点 此函数就是为了解决这样的方法  
42.     function firstNode(node){  
43.         if(node.firstChild){  
44.             if(node.firstChild.nodeType==1){  
45.                 return node.firstChild;  
46.             }else{  
47.                 var n = node.firstChild;  
48.                 while(n.nextSibling){  
49.                     if(n.nextSibling.nodeType==1) return n.nextSibling;  
50.                     nn = n.nextSibling;    
51.                 }  
52.                 return null;      
53.             }     
54.             return null;      
55.         }  
56.     }  
57.       
58.     function next(node){ //返回node的下一个兄弟元素  
59.         if(node.nextSibling){  
60.             if(node.nextSibling.nodeType==1){  
61.                 return node.nextSibling;  
62.             }else{  
63.                 var n = node.nextSibling;  
64.                 while(n.nextSibling){  
65.                     if(n.nextSibling.nodeType==1) return n.nextSibling;  
66.                     nn = n.nextSibling;    
67.                 }  
68.                 return null;      
69.             }     
70.             return null;      
71.         }  
72.     }  
73. </script> 
74. <script> 
75.     var ss = getElementsByClassName("oDiv")[0];  
76.     var kk = ss.childNodes;  
77.     var h = firstNode(ss);  
78.     alert(h.tagName)  
79. </script> 
80. </body> 
81. </html> 

javascript判断浏览器是不是IE6

1. if(window.XMLHttpRequest){ //Mozilla, Safari, IE7 
2.         if(!window.ActiveXObject){ // Mozilla, Safari, 
3.             alert('Mozilla, Safari'); 
4.         }else{ 
5.             alert('IE7'); 
6.         } 
7.     }else { 
8.         alert('IE6'); 
9.     }