>> 欢迎您 客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章 返回首页
>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → Javascript DOM封装方法汇总
发表一个新主题 开启一个新投票 回复文章 您是本文章第 26401 个阅读者 刷新本主题
 * 贴子主题:  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开发-->自定义JSP标签(Ⅱ)
  JSP与Hibernate开发-->立即检索和延迟检索策略
  Java网络编程-->Socket用法详解
  精通Spring-->
  Vue3开发-->Vue指令
本站其他相关文章
  大部分人都会做错的经典JS闭包面试题
  最新的Vue面试题大全含源码级回答，吊打面试官系列
  JavaScript ES2015模块化操作
  Vue之引用第三方JS插件,CKPlayer使用
  HTML表单元素的用法
  jQuery 效果：隐藏和显示
  HTML DOM Li 对象
  JavaScript的HTML DOM Input Search 对象
  jQuery UI 如何使用部件库
  HTML5 播放Audio(音频)
  JavaScript 的HTML DOM 事件
  JavaScript 正则表达式
  JavaScript 输出数据
  jQuery Mobile 安装
  Android 广播接收器(Broadcast Receivers)
  更多...
 IPIP: 已设置保密
楼主      
共1页 0条记录 当前第1页
发表一个新主题 开启一个新投票 回复文章

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