常见的JavaScript兼容性及解决方案整理:
1.选择器兼容性
  getElementsByClassName  ( IE9以及以上支持)
  querySelector/querySelectorAll (IE8以及以上支持)

2.获取计算后的样式
  getComputedStyle (IE9以及以上支持)
  currentStyle(所有IE都支持,它是一个属性)
  兼容方法:封装函数

function getStyle(obj,attr){
  if(obj.currentStyle){
  return obj.currentStyle[attr];
  }else{
  return getComputedStyle(obj)[attr];
  }
}

 

3.trim方法去除字符串前后空格 (支持IE9以及以上)
  兼容方法:在原型上对trim方法用正则表达式去除空格

var str=' kaivon ';
//console.log(str.trim());
String.prototype.trim=function(){
  return this.replace(/^\s+|\s+$/g,'');
};

 

4.forEach()遍历数组( IE9及以上能支持)

var color=['red','green','blue','yellow'];
color.forEach(function(value,index,array){
  console.log(value,index,array);
});

 

  兼容方法:for循环数组

var color=['red','green','blue','yellow'];
for(var i=0;i<color.length;i++){
  console.log(color[i],i,color)
}

 

5.获取DOM节点
   firstChild
   lastChild
   nextSibling
   previousSibling
   以上方法都是兼容的,但是各个浏览器取到的结果不一样。
   IE8以下的非标准浏览器获取到的是标签节点,标准浏览器获取到的不一定是标签节点为 #text。

var box=document.getElementById("box");
//alert(box.firstChild.nodeName);
//alert(box.lastChild.nodeName);
//alert(box.nextSibling.nodeName);
alert(box.previousSibling.nodeName);

 

6.滚动条距离
   BOM属性:(IE9以及以上支持)
   window.pageXOffset;
   window.pageYOffset;
   DOM属性:
   scrollTop/scrollLeft
   document.documentElement.scrollTop (其它的浏览器从document身上去获取)
   document.body.scrollTop ( chrome从body身上获取)
   兼容方法:

document.onclick=function(){
  var top=document.documentElement.scrollTop||document.body.scrollTop;
  alert(top);
}

 

7.event对象
    IE9以及以上支持
    IE6,7,8的事件对象是window身上的一个属性
   兼容方法:

var ev=ev||window.event;

 

8.addEventListener绑定事件
   addEventListener( IE9以及以上支持)
   attachEvent   (IE678支持),但是要注意它的事件名字参数要加on。
  兼容方法:绑定函数封装

//绑定事件
function addEvent(obj,type,fn){
  if(obj.addEventListener){
  obj.addEventListener(type,fn);
  }else{
  obj.attachEvent('on'+type,fn);
  }
};
//取消绑定
function removeEvent(obj,type,fn){
  if(obj.removeEventListener){
  obj.removeEventListener(type,fn);
  }else{
  obj.detachEvent('on'+type,fn);
  }
}

addEvent(box,'click',alertBox);
function alertBox(){
  alert(1);
  removeEvent(box,'click',alertBox);
}

 

9.滚轮事件兼容
   mousewheel            IE/chrome支持
    滚动的方向            event.wheelDelta
                                 上:120(正数)
                                 下:-120(负数)
   DOMMouseScroll     FireFox(必须用addEventListener添加)支持
    滚动的方向            event.detail
                                 上:-3(负数)
                                 下:3(正数)
  兼容方法:滚轮事件封装

function myScroll(obj,upFn,downFn){
  obj.onmousewheel=fn;
  obj.addEventListener('DOMMouseScroll',fn);

  function fn(ev){
  if(ev.wheelDelta>0 || ev.detail<0){
  //这个条件成立,说明现在都是往上边滚动
  //upFn();
  upFn.call(obj,ev);
  }else{
  //走这里说明,都是往下滚动
  //downFn();
  downFn.call(obj,ev);
  }
  ev.preventDefault();
  return false;
  };
}

 

10.Ajax兼容
     Ajax的兼容包括:
    1. XMLHttpRequest对象的兼容  (IE6以下不兼容)
    2.完成事件onreadystatechange、onload的兼容
        onreadystatechange: readyState的值发生改变时触发的事件,只要这个值有变化就会触发
        onload: 所有请求成功完成后触发,此时readystate的值为4 (IE678不支持)
      (新的XMLHttpRequest不推荐用onreadystatechange,使用onload)
     兼容方法:完整的Ajax封装
     注意:因为JSON对象是不兼容的,所以在引入封装好的Ajax之前,需要引入json2.js文件,保证JSON对象在所有平台的兼容。地址。

function ajax(json){
      var settings={
      url:'',
      method:'get',
      data:{},
      dataType:'json',
      succ:function(){},
      fail:function(){}
  };

  //用户传的参数覆盖默认参数
  for(var attr in json){
      settings[attr]=json[attr];
  }

  //把数据拼成正确的格式
  var arr=[];
  for(var attr in settings.data){
      arr.push(attr+'='+settings.data[attr]);
  }
  settings.data=arr.join('&');

  //声明一个ajax对象
  var ajax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');

  //设置请求方式
  if(settings.method.toLocaleLowerCase()==='get'){
      ajax.open(settings.method,settings.url+'?'+settings.data+'&'+new Date().getTime(),true);
      ajax.send();
      }else{
      ajax.open(settings.method,settings.url,true);
      ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      ajax.send(settings.data);
  }

  //设置完成事件的兼容性
  if(typeof ajax.onload==='undefined'){
      ajax.onreadystatechange=ready;
  }else{
      ajax.onload=ready;
  }

  function ready(){
      if(ajax.readyState==4){
          if(ajax.status==200){
          switch(settings.dataType.toLocaleLowerCase()){
          case 'string':
          settings.succ(ajax.responseText);
          break;
        
          case 'json':
          settings.succ(JSON.parse(ajax.responseText));
          break;
        
          case 'xml':
          settings.succ(ajax.responseXML);
          }
          }else{
          settings.fail(ajax.status);
          }
      }
   };
}