首先：如何处理兼容问题
1.如果两个都是属性，用逻辑||做兼容
2.如果有一个是方法，用三元做兼容
3.如果是多个属性或方法，封装函数做兼容
分享两个小知识点：
1、取消拖拽的默认行为：
document.ondragstart = function(){
return false
}
2、阻止右键菜单的默认行为：
document.oncontextmenu = function(){
return false
}
开始兼容问题：
一、运用逻辑运算符||做的相关兼容
1、关于获取滚动高度的不兼容问题
var scrollTop=documentElement.scrollTop
var scrollTop=document.body.scrollTop(chrome写法)
兼容写法：
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop
2、关于获取事件对象的兼容：
function (eve){
var e = eve || window.event
}
3、获取键盘编码的兼容：
function (eve){
var e = eve || window.event
var keyValue = e.keyCode || e.charCode || e.which
}
4、关于事件委托获取事件源的兼容问题：
function (eve){
var e = eve || window.event
var target = e.target || e.srcElement
}
二、运用三元表达式做的兼容
1、阻止事件冒泡的兼容
function (eve){
var e = eve || window.event
e.stopPropagation ? e.stopPropagation : e.cancleBubble = true;
}
2、阻止超链接的默认行为：
oA.onclick = function (eve){
var e = eve || window.event
e.preventDefault ? e.preventDefault() : e.returnValue = false
}
三、运用方法进行兼容的问题：
1、添加事件监听：
function addEventListener(obj,event,fn,boo){
if(obj.addEventListener){
obj.addEventListener(event,fn,boo);
}else{
obj.attachEvent("on" + event,fn);
}
}
运用：
addEventListener(oBtn,"click",fn1,false);
addEventListener(oBtn,"click",fn2,false);
addEventListener(oBtn,"click",fn3,false);
2、移除事件监听：
function removeEventListener(obj,evt,fn,boo){
if(obj.removeEventListener){
obj.removeEventListener(evt,fn,boo);
}else{
obj.detachEvent("on" + evt,fn);
}
}
removeEventListener(oBtn,"click",fn2,false);
3、获取鼠标键值的兼容：（event.button）
function getbutton（eve）{
var e = eve || window.event;
if(eve){//判断是否为标准浏览器
return e.button
}else if(window.event){//判断是不是IE
switch(e.button){
case 1 : return 0;
case 4 : return 1;
case 2 : return 2;
}}}
二:关于使用getAttribute获取className不兼容的问题
<div id="box1"></div>
var oBox=document.getElementById("box1")
(1)console.log(oBox.getAttribute("className"))//标准浏览器不支持,ie7支持
（2)console.log(oBox.getAttribute("class")//标准浏览器支持，ie7不支持
兼容写法：
function fn(obj){
if(obj.getAttribute("class"))==null{
return obj.getAttribute("className");
}else{
return obj.getAttribute("class")
}
};
三：关于getElementsByClassName("class属性名称")的不兼容问题；
console.log(obj.getElementsByClassName("class属性名称"))//标准浏览器支持，ie8以下不支持
兼容写法：
function fn(obj.class属性名称){
if(obj.getElementsByClassName){
return obj.getElementsByClassName(className);
}else{
var list = [];
var arr = obj.getElementsByTagName(*)//上一步是获取页面所有的标签元素
for(var i = 0;i < arr.length;i ++){
if(arr[i].className == className){
list.push(arr[i]);
}
}
return list;}}
遍历所有元素，找出class名为指定名字的元素
四: 关于处理空白文本节点的问题
1.忽略空白文本节点
function fn(nodes){
var arr = [];
for(var i = 0;i < nodes.length;i ++){
if(nodes[i].nodeType === 3 &&
/^\s+$/.test(nodes[i].nodeValue)){
continue;
}else{
arr.push(nodes[i]);
}} return arr;}
2.删除空白文本节点：
function fn(nodes){//nodes;所有的子节点
for(var i = 0;i < nodes.length;i ++){
if(nodes[i].nodeType === 3 &&
/^\s+$/.test(nodes[i].nodeValue)){
nodes[i].parentNode.removeChild(nodes[i]);}}
return nodes
}
3.移除空白节点
function fn(node){//node:父节点
var childs = node.childnodes;//获取所有子节点
for(var i = 0;i < childs.length;i ++){
if(childs[i].nodeType === 3 &&
/^\s+$/.test(childs[i].nodeValue)){
node.removeChild(childs[i]);}}
return node;
}
五:获取非行内样式的兼容写法
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];
}
attr：是属性；比如
<style>#box{width:100px;}</style>
<div id = box></div>
<script>
var oBox = document.getElementById("box");
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true[attr];
};
var s = getStyle(oBox,"width");
alert(s);
</script>
