浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分。我们在讲老版本浏览器兼容问题之前，首先要了解什么是能力检测，它是来检测浏览器有没有这种能力，即判断当前浏览器是否支持要调用的属性或者方法。下面做了一些简短的介绍。
1、innerText 和 innerContent1）innerText 和 innerContent 的作用相同2）innerText IE8之前的浏览器支持3）innerContent 老版本的Firefox支持4）新版本的浏览器两种方式都支持
JavaScript Code复制内容到剪贴板
if(element.textContent){
returnelement.textContent;
}else{
returnelement.innerText;
}
2、获取兄弟节点/元素的兼容性问题
1）兄弟节点，所有浏览器都支持
①nextSibling 下一个兄弟节点，可能是非元素节点；会获取到文本节点
②previousSibling 上一个兄弟节点，可能是非元素节点；会获取到文本节点
2）兄弟元素，IE8以前不支持
①previousElementSibling 获取上一个紧邻的兄弟元素，会忽略空白
②nextElementSibling 获取下一个紧邻的兄弟元素，会忽略空白
JavaScript Code复制内容到剪贴板
functiongetNextElement(element){
if(element.nextElementSibling){
returnelement.nextElementSibling;
}else{
varnode=element.nextSibling;
while(node&&node.nodeType!==1){
node=node.nextibling;
}
returnnode;
}
}
JavaScript Code复制内容到剪贴板
functiongetPreviousElement(element){
if(element.previousElementSibling){
returnelement.previousElementSibling;
}else{
varel=element.previousSibling;
while(el&&el.nodeType!==1){
el=el.previousSibling;
}
returnel;
}
}
JavaScript Code复制内容到剪贴板
functiongetFirstElement(parent){
if(parent.firstElementChild){
returnparent.firstElementChild;
}else{
varel=parent.firstChild;
while(el&&el.nodeType!==1){
el=el.nextSibling;
}
returnel;
}
}
JavaScript Code复制内容到剪贴板
functiongetLastElement(parent){
if(parent.lastElementChild){
returnparent.lastElementChild;
}else{
varel=parent.lastChild;
while(el&&el.nodeType!==1){
el=el.previousSibling;
}
returnel;
}
}
JavaScript Code复制内容到剪贴板
functionsibling(element){
if(!element)return;
varelements=[];
varel=element.previousSibling;
while(el){
if(el.nodeType===1){
elements.push(el);
}
el=el.previousSibling;
}
el=element.previousSibling;
while(el){
if(el.nodeType===1){
elements.push(el);
}
el=el.nextSibling;
}
returnelements;
}
3、array.filter(); // 使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组
JavaScript Code复制内容到剪贴板
if(!Array.prototype.filter)
{
Array.prototype.filter=function(fun)
{
"usestrict";
if(this===void0||this===null)
thrownewTypeError();
vart=Object(this);
varlen=t.length>>>0;
if(typeoffun!=="function")
thrownewTypeError();
varres=[];
varthisArg=arguments.length>=2?arguments[1]:void0;
for(vari=0;i<len;i++)
{
if(iint)
{
varval=t[i];
if(fun.call(thisArg,val,i,t))
res.push(val);
}
}
returnres;
};
}
4、array.forEach();// 遍历数组
JavaScript Code复制内容到剪贴板
if(!Array.prototype.forEach){
Array.prototype.forEach=function(callback,thisArg){
varT,k;
if(this==null){
thrownewTypeError(\’thisisnullornotdefined\’);
}
varO=Object(this);
varlen=O.length>>>0;
exception.
if(typeofcallback!=="function"){
thrownewTypeError(callback+\’isnotafunction\’);
}
if(arguments.length>1){
T=thisArg;
}
k=0;
while(k<len){
varkValue;
if(kinO){
kValue=O[k];
callback.call(T,kValue,k,O);
}
k++;
}
};
}
5、注册事件
JavaScript Code复制内容到剪贴板
.addEventListener=function(type,listener,useCapture){};
JavaScript Code复制内容到剪贴板
varEventTools={
addEventListener:function(element,eventName,listener){
if(element.addEventListener){
element.addEventListener(eventName,listener,false);
}elseif(element.attachEvent){
element.attachEvent("on"+eventName,listener);
}else{
element["on"+eventName]=listener;
}
},
removeEventListener:function(element,eventName,listener){
if(element.removeEventListener){
element.removeEventListener(eventName,listener,false);
}elseif(element.detachEvent){
element.detachEvent("on"+eventName,listener);
}else{
element["on"+eventName]=null;
}
}
};
6、事件对象
1)事件参数e，就是事件对象，标准的获取方式
btn.onclick = function(e) { }
2)e.eventPhase 事件阶段，IE8以前不支持
3)e.target 始终是触发事件的对象（点击的按钮）
i）IE8以前 srcElement
ii）浏览器兼容
var target = e.target || window.event.srcElement;
JavaScript Code复制内容到剪贴板
getEvent:function(e){
returne||window.event;
}
getTarget:function(e){
returne.target||e.srcElement;
}
7、获取鼠标在页面上的位置
①在可视区域中的位置： e.clientX e.clientY
②在文档中的位置： i） e.pageX e.pageY
ii）浏览器兼容
JavaScript Code复制内容到剪贴板
varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;
varpageY=e.clientY+scrollTop;
8、获取页面滚动的距离
JavaScript Code复制内容到剪贴板
varscrollTop=document.documentElement.scrollTop||document.body.scrolltop;
9、取消文本的选择
JavaScript Code复制内容到剪贴板
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
以上这篇浅谈JavaScript中浏览器兼容的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持悠久资源网。
