>> 欢迎您 客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章 返回首页
>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → Javascript DOM封装方法汇总
发表一个新主题 开启一个新投票 回复文章 您是本文章第 20925 个阅读者 刷新本主题
 * 贴子主题:  Javascript DOM封装方法汇总 回复文章 点赞(0)  收藏  
作者:flybird    发表时间：2020-01-31 00:14:40     消息  查看  搜索  好友  邮件  复制  引用
   一：在页面上增加类和删除类的方法：

         增加类：传两个参数 节点和类名 方法如下：                          
  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.           //可以写个简单的函数来判断  
  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.           }  
  25.            function  stop(){  
  26.               flag =  false ;    
  27.               start.disabled =  false ;  
  28.                this .disabled =  true ;  
  29.           }  
  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.           }  
  18.           function stop(){  
  19.               clearInterval(t); //用这种方式就可以清除缓存 但是还存在另一个问题 就是说假如我点击多次开始按钮时候 它还会执行上面的代码setInterval这段代码  
  20.               // 而现在我执行结束按钮时候 结束不掉 ！所以我们要做他们执行setIvterval之前要clearInterval清除一次  
  21.           }  
  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.            t this.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 >  
  11.   < body >  
  12.   < div   class = "oDiv" >  
  13.        < p > < a > aaa </ a > </ p >  
  14.        < div > </ div >  
  15.   </ div >  
  17.   < script >  
  18.       function getElementsByClassName(className,context){  
  19.            context context  = 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.       }  
  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.           }  
  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.                        n n  = n.nextSibling;    
  51.                   }  
  52.                   return null;      
  53.               }    
  54.               return null;      
  55.           }  
  56.       }  
  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.                        n n  = 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.       }
----------------------------
原文链接:https://blog.51cto.com/tugenhua/750833
原作者:涂根华

程序猿的技术大观园：www.javathinker.net



[这个贴子最后由 flybird 在 2020-01-31 21:28:56 重新编辑]
Java精品书籍推荐
Java最新视频教程推荐
  Java面向对象编程-->第一个Java程序
  JavaWeb开发-->Web运作原理（Ⅲ）
  JSP与Hibernate开发-->数据库事务的并发问题的解决方案
  Java网络编程-->Socket用法详解
  精通Spring-->计算属性和数据监听
  Vue3开发-->创建综合购物网站应用
本站其他相关文章
  大部分人都会做错的经典JS闭包面试题
  vue3.0 代理Proxy API
  axios和vue-axios的关系
  Axios拦截器的用法
  CSS3的@keyframes用法详解
  vue封装翻转卡片效果
  JavaScript中数组的常用方法（含ES6）
  史上最全的web前端面试题汇总及答案
  SQL NULL 值
  jQuery 添加元素
  HTML DOM Script 对象
  CSS3 文本效果
  HTML5 内联 SVG
  JavaScript HTML DOM EventListener
  JavaScript 代码规范
  更多...
 IPIP: 已设置保密
楼主      
共1页 0条记录 当前第1页
发表一个新主题 开启一个新投票 回复文章

中文版权所有： JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶，分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权，请与本站管理员联系。