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
  2. <script>
  3.         //把相应网址添加到收藏夹里面去
  4.         //IE的方式是:window.external.addFavorite(sUrl,sTitle);
  5.         //火狐的方式是:window.sidebar.addPanel(sTitle,sUrl,"");
  6.         //IE和火狐分别实现了自己的添加到收藏夹的方式 其中address是页面的网址 name是页面的标题
  7.         //可以写个简单的函数来判断
  8. function addFav(){
  9. try{
  10.                 window.sidebar.addPanel("百度","http://www.baidu.com",""); //火狐的
  11. }catch(e){
  12. try{
  13.                     window.external.addFavorite("http://www.baidu.com","百度"); //IE的
  14. }catch(e){
  15. }
  16. }
  17. }
  18. </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. function stop(){
  25. flag = false;
  26. start.disabled = false;
  27. this.disabled = true;
  28. }
  29. function addEvent(obj,evt,fn,userCape){
  30. if(obj.addEventListener){
  31. obj.addEventListener(evt,fn,false);
  32. }else{
  33. obj.attachEvent("on" + evt,function(){
  34. fn.call(obj);
  35. })
  36. }
  37. }
  38. </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. function stop(){
  18.             clearInterval(t); //用这种方式就可以清除缓存 但是还存在另一个问题 就是说假如我点击多次开始按钮时候 它还会执行上面的代码setInterval这段代码
  19. // 而现在我执行结束按钮时候 结束不掉 !所以我们要做他们执行setIvterval之前要clearInterval清除一次
  20. }
  21. function addEvent(obj,evt,fn,userCape){
  22. if(obj.addEventListener){
  23. obj.addEventListener(evt,fn,false);
  24. }else{
  25. obj.attachEvent("on" + evt,function(){
  26. fn.call(obj);
  27. })
  28. }
  29. }
  30. </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. </style>
  8. </head>
  9. <body>
  10. <div class="oDiv">
  11. <p>aaa</p>
  12. <div></div>
  13. </div>
  14. <script>
  15. function getElementsByClassName(className,context){
  16. contextcontext = context || document;
  17. if(context.getElementsByClassName){
  18. return context.getElementsByClassName(className);
  19. }
  20.         var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点
  21.         for(var i=0;i<nodes.length;i++){   //遍历所有的节点
  22. if(hasClass(nodes[i],className)) ret.push(nodes[i]);
  23. }
  24. return ret;
  25. }
  26. //检查有没有类
  27. function hasClass(node,className){
  28.         var names = node.className.split(/s+/);//正则表达式所有的类名用空格分开
  29.         //遍历这个类名
  30. for(var i=0;i<names.length;i++){
  31. if(names[i]==className)
  32. return true;
  33. }
  34. return false;
  35. }
  36. //获取元素的第一个子节点 js本来是有获取第一个子节点的方法 但是获取时候会把空白 其他字符也当作节点 此函数就是为了解决这样的方法
  37. function firstNode(node){
  38. if(node.firstChild){
  39. if(node.firstChild.nodeType==1){
  40. return node.firstChild;
  41. }else{
  42. var n = node.firstChild;
  43. while(n.nextSibling){
  44. if(n.nextSibling.nodeType==1) return n.nextSibling;
  45. nn = n.nextSibling;
  46. }
  47. return null;
  48. }
  49. return null;
  50. }
  51. }
  52.     function next(node){ //返回node的下一个兄弟元素
  53. if(node.nextSibling){
  54. if(node.nextSibling.nodeType==1){
  55. return node.nextSibling;
  56. }else{
  57. var n = node.nextSibling;
  58. while(n.nextSibling){
  59. if(n.nextSibling.nodeType==1) return n.nextSibling;
  60. nn = n.nextSibling;
  61. }
  62. return null;
  63. }
  64. return null;
  65. }
  66. }
  67. </script>
  68. <script>
  69. var ss = getElementsByClassName("oDiv")[0];
  70. var kk = ss.childNodes;
  71. var h = firstNode(ss);
  72. alert(h.tagName)
  73. </script>
  74. </body>
  75. </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. }
阅读 178
4 声望
0 粉丝
0 条评论
你知道吗?

4 声望
0 粉丝
宣传栏