浏览器兼容问题处理

目前，最为流行的浏览器共有五个：分别是ie,Edge浏览器（属于微软），火狐，谷歌（chrome）Safari和Opera五大浏览器。

这五大浏览器分别有各自的浏览器内核，下面介绍以下各个浏览器的内核（包括一些国内的浏览器）：

Trident内核：IE ，360，，猎豹，百度；

Gecko内核：火狐----------->这个浏览器内核是开源的浏览器内核，插件非常多，-------------->缺点：打开速度慢（加载flash插件）<-----额外介绍----->。

Webkit:遨游，苹果 ，symbian；

Bink:chrome浏览器，大部分国产浏览器最新版本都采用Blink；

由于这些浏览器的内核不相同，因此，他们的对编辑页面的一些属性的支持也有所不同，接下来，我就谈一谈在解决浏览器兼容方面的见解：

首先是关于innerText和textContent的问题的见解：

innerText 谷歌，火狐和IE8都支持
低版本 的火狐不支持innerText
textContent在IE8中的结果是undefined；
textContent在谷歌和火狐中支持；

这些内容是必须知道的，也是以后解决兼容性问题的引子或者思路，同时也是基础。

在解决浏览器兼容性的问题上面，首先，可以通过获取浏览器的版本来判断这个浏览器是不是支持这个属性，但是这种办法非常的麻烦。
具体做法是：我要在一系列的信息中找到这个浏览器版本里面的具体是什么样的，然后用正则表达式去匹配，然后确定这个浏览器里面具体用的什么东西。这就是整个的内容，所以，相当的麻烦。
当然，获取浏览器版本的代码很简单，就一句话，一行代码，但是仅仅是为了判断这个浏览器是不是支持这个属性 ，是不是放在这里好像有点儿大材小用了。因此，就直接判断这个浏览器里面是不是支持这个属性就可以了。

为了解决这个不兼容的问题，我们可以编辑以下代码来解决上述问题：

复制代码
1 //任意元素都可以设置成文本内容----------因此把“任意”元素当成对象（element）传递到函数中
2
3 //element---->任意元素
4 //text—>任意文本内容
5 function setInnerText(element,text) {
6 if(typeof (element.textContent)‘undefined’){//是IE8浏览器
7 element.innerText=text;
8 }else{
9 //浏览器支持textContent这个属性
10 element.textContent=text;
11 }
12 }
13
14
15 //获取任意元素中的文本内容
16 function getInnerText(element) {
17 if(typeof (element.textContent)“undefined”){
18 //如果浏览器不支持textContext这个属性则返回innerText的值
19 return element.innerText;
20 }else{
21 //如果浏览器支持textContext属性,则直接返回该属性的值
22 return element.textContent;
23 }
24 }
复制代码
上述代码就可以解决innnerText和textContent在各个浏览器之间不兼容的问题（上述代码目前只在谷歌，火狐，IE8版本上面测试，以后还会在其他的浏览器的不同版本上面测试，测试结果还会不断的更新，尽请期待）。

上面介绍的内容只阐述部分属性在各个浏览器上面的差异，当然，还有其他的兼容问题存在，他们分别是：

（1）获取某个元素中的第一个子元素

（2）获取某个元素中的最后一个子元素

（3）获取某个元素的前一个兄弟元素

（4）获取某个元素的后一个兄弟元素

下面，我分别给出了相应的兼容性问题解决办法代码：

复制代码
1 1 //获取某个元素中的第一个子元素
2 2 function getFirstElement(element) {
3 3 if(element.firstElementChild){
4 4 //如果浏览器支持这个属性就直接返回第一个子元素
5 5 return element.firstElementChild;
6 6 }else{
7 7 //如果浏览器不支持这个firstElementChild属性,先获取传入进来的父级元素中的第一个子节点
8 8 var node=element.firstChild;//先获取这个节点
9 9 while (node&&node.nodeType!=1){//判断节点存在并且不是标签
10 10 node=node.nextSibling;//继续找当前节点的下一个节点
11 11 }
12 12 return node;
13 13 }
14 14 }
15 20 //下面这连个属性在各个不同的浏览器中显示的方式有所不同
16 21 //my$("uu").firstChild1722//my$(“uu”).firstElementChild
18 23
19 24 //获取某个元素中的最后一个子元素
20 25 function getLastElement(element) {
21 26 if(element.lastElementChild){
22 27 return element.lastElementChild;
23 28 }else{
24 29 //获取当前元素的最后一个子节点
25 30 var node=element.lastChild;
26 31 while (node&&node.nodeType!=1){
27 32 node=node.previousSibling;
28 33 }
29 34 return node;
30 35 }
31 36 }
32
33 44
34 45 //获取某个元素的前一个兄弟元素
35 46 function getPreviousElement(element) {
36 47 if(element.previousElementSibling){
37 48 return element.previousElementSibling
38 49 }else{
39 50 var node=element.previousSibling;
40 51 while (node&&node.nodeType!=1){
41 52 node=node.previousSibling;
42 53 }
43 54 return node;
44 55 }
45 56 }
46 57
47 58
48 59
49 60 //获取某个元素的后一个兄弟元素
50 61 function getNextElement(element) {
51 62 if(element.nextElementSibling){
52 63 return element.nextElementSibling
53 64 }else{
54 65 var node=element.nextSibling;
55 66 while (node&&node.nodeType!=1){
56 67 node=node.nextSibling;
57 68 }
58 69 return node;
59 70 }
60 71 }
常遇到的关于浏览器的宽高问题：

复制代码
//以下均可console.log()实验
var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽
var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽
//以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框

var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高

var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高
var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离

var screenH=window.screen.height;//屏幕分辨率的高
var screenW=window.screen.width;//屏幕分辨率的宽
var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox）
var screenXX=window.screenX;//FireFox相对于屏幕的X坐标
var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox）
var screenYY=window.screenY;//FireFox相对于屏幕的y坐标

复制代码
event事件问题：

复制代码
//event事件问题
document.οnclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
var e=ev;
console.log(e);
}
document.οnclick=function(){//谷歌和IE支持，火狐不支持；
var e=event;
console.log(e);
}
document.οnclick=function(ev){//兼容写法；
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
复制代码
DOM节点相关的问题，我直接封装了函数，以便随时可以拿来使用：

复制代码
//DOM节点相关，主要兼容IE 6 7 8
function nextnode(obj){//获取下一个兄弟节点
if (obj.nextElementSibling) {
return obj.nextElementSibling;
} else{
return obj.nextSibling;
};
}
function prenode(obj){//获取上一个兄弟节点
if (obj.previousElementSibling) {
return obj.previousElementSibling;
} else{
return obj.previousSibling;
};
}
function firstnode(obj){//获取第一个子节点
if (obj.firstElementChild) {
return obj.firstElementChild;//非IE678支持
} else{
return obj.firstChild;//IE678支持
};
}
function lastnode(obj){//获取最后一个子节点
if (obj.lastElementChild) {
return obj.lastElementChild;//非IE678支持
} else{
return obj.lastChild;//IE678支持
};
}
复制代码
document.getElementsByClassName问题：

复制代码
//通过类名获取元素
document.getElementsByClassName(’’);//IE 6 7 8不支持；

//这里可以定义一个函数来解决兼容问题，当然别在这给我提jQuery...
//第一个为全局获取类名，第二个为局部获取类名
function byClass1(oClass){//全局获取，oClass为你想要查找的类名，没有“.”
    var tags=document.all?document.all:document.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
        var reg=new RegExp('\\b'+oClass+'\\b','g');
        if (reg.test(tags[i].className)) {
            arr.push(tags[i]);
        };
    };
    return arr;//注意返回的也是数组，包含你传入的class所有元素；
}

function byClass2(parentID,oClass){//局部获取类名，parentID为你传入的父级ID
    var parent=document.getElementById(parentID);
    var tags=parent.all?parent.all:parent.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
    var reg=new RegExp('\\b'+oClass+'\\b','g');
        if (reg.test(tags[i].className)) {
            arr.push(tags[i]);
        };
    };
    return arr;//注意返回的也是数组，包含你传入的class所有元素；
 }

复制代码
获取元素的非行间样式值：

复制代码
//获取元素的非行间样式值
function getStyle(object,oCss) {
if (object.currentStyle) {
return object.currentStyle[oCss];//IE
}else{
return getComputedStyle(object,null)[oCss];//除了IE
}
}
复制代码
设置监听事件：

复制代码
//设置监听事件
function addEvent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false
if (obj.addEventListener) {
obj.addEventListener(type,fn,false);//非IE
} else{
obj.attachEvent(‘on’+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了
};
}
function removeEvent(obj,type,fn){//删除事件监听
if (obj.removeEventListener) {
obj.removeEventListener(type,fn,false);//非IE
} else{
obj.detachEvent(‘on’+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了
};
}
复制代码
元素到浏览器边缘的距离：

复制代码
//在这里加个元素到浏览器边缘的距离，很实用
function offsetTL(obj){//获取元素内容距离浏览器边框的距离（含边框）
var ofL=0,ofT=0;
while(obj){
ofL+=obj.offsetLeft+obj.clientLeft;
ofT+=obj.offsetTop+obj.clientTop;
obj=obj.offsetParent;
}
return{left:ofL,top:ofT};
}
复制代码
阻止事件传播：

复制代码
//js阻止事件传播，这里使用click事件为例
document.οnclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE…
}
}
复制代码
阻止默认事件：

复制代码
//js阻止默认事件
document.οnclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue=‘false’;//IE…
}
}
复制代码
关于EVENT事件中的target：

复制代码
//关于event事件中的target
document.οnmοuseοver=function(e){
var e=e||window.event;
var Target=e.target||e.srcElement;//获取target的兼容写法，后面的为IE
var from=e.relatedTarget||e.formElement;//鼠标来的地方，同样后面的为IE…
var to=e.relatedTarget||e.toElement;//鼠标去的地方
}
复制代码
鼠标滚轮滚动事件：

复制代码
//鼠标滚轮事件
//火狐中的滚轮事件
document.addEventListener(“DOMMouseScroll”,function(event){
alert(event.detail);//若前滚的话为 -3，后滚的话为 3
},false)
//非火狐中的滚轮事件
document.onmousewheel=function(event){
alert(event.detail);//前滚：120，后滚：-120
}
节点加载：

//火狐下特有的节点加载事件，就是节点加载完才执行，和onload不同
//感觉用到的不多，直接把js代码放在页面结构后面一样能实现。。
document.addEventListener(‘DOMContentLoaded’,function ( ){},false);//DOM加载完成。好像除IE6-8都可以.