常见的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);
}
}
};
}
