JS的兼容写法

js的兼容写法

1. 获取后一个兄弟节点的兼容写法

   var nextElement=oLi3.nextElementSibling || oLi3.nextSibling;
   

2. 获取前一个兄弟节点的兼容写法

   var previousElement=oLi3.previousElement || oLi3.previousSibling;
   

3. childNodes的兼容写法

       function getChildNodes(ele){    
           // 定义一个空的数组    
           var arr=[];    
           // 获取指定元素    
           var oEle=document.querySelector(ele);    
           // 将元素下边的所有儿子拿到    
           for(var i=0; i<oEle.childNodes.length; i++){        
         // 变量判断真的儿子 (元素节点nodeType == 1)        
         if(oEle.childNodes[i].nondeType==1){            
              // 将真儿子添加到数组里            
              arr.push(oEle.childNodes[i])        
         }    
     }    
     return arr;  //返回数组
   }
   

4. 拿到第一个儿子的兼容写法

   var No1=oBox.fristElementChild || oBox.fristChild;
   

5. 拿到最后一个儿子

   var oLast=oBox.lastElementChild || oBox.lastChild;
   

滚动条的兼容写法

1. 检点的兼容写法

   document.documentElement.scrollTop || document.body.scrllTop
   

2. 高级的兼容写法

   function myScroll(){    
   // ie9以上, google, 火狐都能用    
   if(window.pageXOffset != null){        
        return {            
            "left": window.pageXOffset,            
            "top": window.pageYOffset        
        }    
   }else if(document.compatMode=="CSS1Compat"){        
        // 标准 DTD (有声明头)        
        return {            
             "left":document.documentElement.scrollLeft,            
             "top": document.documentElement.scrollTop        
        }    
   }    
   // 非标准 没有DTD (没有声明头)    
   return{        
        "left":document.body.scrollLeft,        
        "top": document.body.scrollTop    
   }
   }
   

   html5的新标签在 IE6 7 8下有兼容问题, 解决原理是 动态创建标签

   document.createElement, 也可以快速使用html5shiv插件

   事件对象的兼容

   var e=evt || window.wvwnt;
   

   获取样式的兼容写法

   function getStyle(obj, attr){    
        // google 火狐    
        if(window.getComputedStyle){        
              return window.getComputedStyle(obj, null)[attr];    
        }    
        // ie 6 7 8 9    
        return obj.currentStyle[attr];
   }
   

   阻止冒泡的兼容

   if(e.stopPropagation){    
         e.stopPropagation();
   } else {    
         e.cancelBubble=true;
   }
   

   阻止默认行为

   if(e.preventDefault){    
         e.preventDefault();
   } esle {    
         e.returnValue=false;
   }
   

   事件监听的兼容写法

   oBtn.addEventListenter("click", function(){    
         alert(123);
   },{   
         once: true;  
         // 只能被点一次    
         useCature:true;
   })​
   // obj 给指定的元素添加事件
   // type 事件的类型(click , mouseenter);
   // fn 函数名称// useCapTrue  捕获还是冒泡
   ​function addEvent(obj,type, useCapTure){    
         if(obj.addEventListenter){        
                obj.addEventListenter(type, fn, useCapTure)    
         } else {    
          obj.attachEvent("on"+type, fn)    
   }
   }
   

   事件监听移除兼容写法

   function removeEvent(obj, type, useCaTure){
   	if(obj,removeEventListenter){
   		obj.removeEventListener(type, fn, useCapTrue);
   	} else {
   		obj.detachEvent("on"+type, fn);
   	}
   }
   

   输入框 输入事件的兼容写法

   oTxt.oninput=oTxt.onpropertychange=function(){
   	console.log("oninput")
   }