浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分。我们在讲老版本浏览器兼容问题之前，首先要了解什么是能力检测，它是来检测浏览器有没有这种能力，即判断当前浏览器是否支持要调用的属性或者方法。下面做了一些简短的介绍。

1、innerText 和 innerContent

1）innerText 和 innerContent 的作用相同

2）innerText IE8之前的浏览器支持

3）innerContent 老版本的Firefox支持

4）新版本的浏览器两种方式都支持

JavaScript Code复制内容到剪贴板 //老版本浏览器兼容innerText和innerContent 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复制内容到剪贴板 /** *返回上一个元素 *@paramelement *@returns{*} */ functiongetPreviousElement(element){ if(element.previousElementSibling){ returnelement.previousElementSibling; }else{ varel=element.previousSibling; while(el&&el.nodeType!==1){ el=el.previousSibling; } returnel; } } JavaScript Code复制内容到剪贴板 /** *返回第一个元素firstElementChild的浏览器兼容 *@paramparent *@returns{*} */ functiongetFirstElement(parent){ if(parent.firstElementChild){ returnparent.firstElementChild; }else{ varel=parent.firstChild; while(el&&el.nodeType!==1){ el=el.nextSibling; } returnel; } } JavaScript Code复制内容到剪贴板 /** *返回最后一个元素 *@paramparent *@returns{*} */ functiongetLastElement(parent){ if(parent.lastElementChild){ returnparent.lastElementChild; }else{ varel=parent.lastChild; while(el&&el.nodeType!==1){ el=el.previousSibling; } returnel; } } JavaScript Code复制内容到剪贴板 /** *获取当前元素的所有兄弟元素 *@paramelement *@returns{Array} */ 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/*,thisArg*/) { "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]; //NOTE:TechnicallythisshouldObject.definePropertyat //thenextindex,aspushcanbeaffectedby //propertiesonObject.prototypeandArray.prototype. //Butthatmethod'snew,andcollisionsshouldbe //rare,sousethemore-compatiblealternative. if(fun.call(thisArg,val,i,t)) res.push(val); } } returnres; }; } 4、array.forEach();

// 遍历数组 JavaScript Code复制内容到剪贴板 //兼容旧环境 //ProductionstepsofECMA-262,Edition5,15.4.4.18 //Reference:http://es5.github.io/#x15.4.4.18 if(!Array.prototype.forEach){ Array.prototype.forEach=function(callback,thisArg){ varT,k; if(this==null){ thrownewTypeError('thisisnullornotdefined'); } //1.LetObetheresultofcallingtoObject()passingthe //|this|valueastheargument. varO=Object(this); //2.LetlenValuebetheresultofcallingtheGet()internal //methodofOwiththeargument"length". //3.LetlenbetoUint32(lenValue). varlen=O.length>>>0; //4.IfisCallable(callback)isfalse,throwaTypeError exception.//See:http://es5.github.com/#x9.11 if(typeofcallback!=="function"){ thrownewTypeError(callback+'isnotafunction'); } //5.IfthisArgwassupplied,letTbethisArg;elselet //Tbeundefined. if(arguments.length>1){ T=thisArg; } //6.Letkbe0 k=0; //7.Repeat,whilek<len while(k<len){ varkValue; //a.LetPkbeToString(k). //ThisisimplicitforLHSoperandsoftheinoperator //b.LetkPresentbetheresultofcallingtheHasProperty //internalmethodofOwithargumentPk. //Thisstepcanbecombinedwithc //c.IfkPresentistrue,then if(kinO){ //i.LetkValuebetheresultofcallingtheGetinternal //methodofOwithargumentPk. kValue=O[k]; //ii.CalltheCallinternalmethodofcallbackwithTas //thethisvalueandargumentlistcontainingkValue,k,andO. callback.call(T,kValue,k,O); } //d.Increasekby1. k++; } //8.returnundefined }; } 5、注册事件 JavaScript Code复制内容到剪贴板 .addEventListener=function(type,listener,useCapture){}; //第一个参数事件名称 //第二个参数事件处理函数（监听者） //第三个参数true捕获false冒泡 //IE9以后才支持 // 兼容旧环境 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){//IE8以前注册.attachEvent和移除事件.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;//e事件对象标准的获取方式；window.eventIE8以前获取事件对象的方式 } //兼容target 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中浏览器兼容的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。