所谓兼容性,就是看浏览器是否支持当前对象的属性或是方法,先通过获得页面文本内容的方式来了解兼容性,并封装函数或对象以解决此类问题。
获得页面文本内容的方式:innnerText 或textContent 或innerHTML。
innerText在不同浏览器存在有兼容性问题,为此我们需要封装到一个函数里,使得不同的浏览器及不同版本都能获得页面文本。(谷歌兼容性较好,这里只拿早期火狐版本和IE8及其之前版本作比较)
innerText和innerHTml的具体区别
  在获取页面文本的时候
1,innerText只会获取到标签之间的文本信息,不会获取到标签;innerHTML是获得标签之前的所有内容,包括标签本身
2,IE8及之前的版本是支持innerText的,早期的火狐浏览器是不支持的,早期的火狐只支持textContent,而IE8不支持;innerHTML是所有浏览器都支持的,不存在兼容性问题
  
/**
* innerText textContent
* 获得页面标签之间文本内容的兼容性写法
* @param obj
* @returns {*}
*/
function getInnerText(obj) {
if (obj.innerText) { //IE8及之前的版本支持
return obj.innerText;
} else {
return obj.textContent; //早期的火狐支持
}
}

  在设置页面文本的时候
1,innerText会把设置的文本内容原样输出;文本里即使有html标签,也不会渲染出来(发生了转义)
2,innerHTML会渲染出html标签的,无兼容性问题
  
/**
* 设置页面标签之间文本内容的兼容性写法
* @param obj
* @param value
*/
function setInnerText(obj, value) {
if (obj.innerText) {
obj.innerText = value;
} else {
obj.textContent = value;
}
}
  若有很多此类兼容性问题需要封装,可以统一把它们封装到一个对象里,如下
var txt = {
getInnerText: function (obj) {
if (obj.innerText) { //IE8及之前的版本支持
return obj.innerText;
} else {
return obj.textContent; //早期的火狐支持
}
},
setInnerText: function (obj, value) {
if (obj.innerText) {
obj.innerText = value;
} else {
obj.textContent = value;
}
}
};

  再看一个小例子

  获得下一个兄弟元素节点的能力检测
nextSibling chrome,火狐都支持。但是会获得文本节点,IE8及之前版本会忽略空白文本节点
nextElementSibling chrome,火狐支持,IE8及之前版本不支持
/**
* 取下一个兄弟元素节点
* @param element
* @returns {*}
*/
function getNextElement(element) {
if (element.nextElementSibling) {
return element.nextElementSibling;
} else {
var node = element.nextSibling;
while (node && node.nodeType != 1) { //文本节点的节点值为1
node = node.nextSibling;
}
return node;
}
}

以后的工作和学习中有许多兼容性的问题,多了解封装的思想和方法。

js中兼容性问题的封装(能力检测)的更多相关文章

  1. js 中调用 Object.prototype.toString()来检测对象的类型

    1.使用toString()方法来检测对象类型 可以通过toString() 来获取每个对象的类型.为了每个对象都能通过 Object.prototype.toString() 来检测,需要以 Fun ...

  2. js中运动框架的封装

    //获取非行间样式的封装 function setStyle(obj,name){ // 考虑兼容性问题 if(obj.currentStyle){//不兼容火狐和谷歌 return obj.curr ...

  3. JS中OOP之模拟封装和继承和this指向详解

    大家好,今天我带大家学习一下js的OOP, 大家都知道,面向对象有三个基本特征,继承,封装和多态,面向对象的语言有那么几种,C++,PHP,JAVA等,而功能强大的JS可以模拟实现面向对象的两大特征, ...

  4. JS中深浅拷贝 函数封装代码

    一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...

  5. JS对象的概念、声明方式等及js中的继承与封装

    对象的遍历 对象可以当做数组处理,使用for in var person={}; person.name="cyy"; person.age=25; person.infos=fu ...

  6. js中的数据类型,以及如何检测数据类型

    基本数据类型:string,number,boolean,null,undefined,symbol 引用数据类型:object(array,function...) 常用的检测数据类型的方法一般有以 ...

  7. JS中数组方法的封装之slice

    slice方法的功能 // 1) : 数组的截取 // 2) :slice(m,n): 从数组索引m开始,截取到索引n,但是不包含n;[前包后不包] // slice(m) : 从索引m开始,截取到末 ...

  8. js 中常用到的封装方法

    /** * 获取URL参数 */ function getQueryString(name) { var reg = new RegExp("(^|&)" + name + ...

  9. 谈一谈原生JS中的【面向对象思想】

           [重点提前说:面向对象的思想很重要!]         最近开始接触学习后台的PHP语言,在接触到PHP中的面向对象相关思想之后,突然想到之前曾接触的JS中的面向对象思想,无奈记性太差, ...

随机推荐

  1. JS函数 -- 功能,语法,返回值,匿名函数,自调用匿名函数,全局变量与局部变量,arguments的使用

    “JavaScript设计得最出色的就是它的函数的实现.” -- <JavaScript语言精粹> 函数包含一组语句,它们是JS的基础模块单元,用于指定对象的行为.一般来说,所谓编程,就是 ...

  2. 修改Credentials 密码

    今天,Leader 吩咐要修改管理账户的密码,我负责的Part是修改package和 Replication的Job的密码.仔细想了下,由于我们使用的Windows验证方式,而Job在执行时,是使用P ...

  3. Mask裁切UI粒子特效或者3D模型

    刚好前几天有人问我这个问题,再加上新项目也可能用,所以这两天就研究了一下.其实如果粒子特效 和3D模型 都用RenderTexture来做的话就不会有裁切的问题,但是粒子特效用RenderTextur ...

  4. 学习3ds max插件开发过程中的一些小结

    1. 3ds max是以树状结构来管理整个场景的,每个树节点类型为INode 2. Interface类很关键,可以通过其中的GetRootNode.NumberOfChildren和GetChild ...

  5. supportRequestWindowFeature与requestWindowFeature

    在Activity中去掉标题栏只需要在onCreate()中在setContentView前使用requestWindowFeature(). 在AppCompatActivity中去掉标题栏只需要在 ...

  6. javascript运动系列第八篇——碰壁运动

    × 目录 [1]匀速碰壁 [2]自由落体 [3]投掷碰壁[4]拖拽碰壁 前面的话 碰撞运动可能是运动系列里面比较复杂的运动了.碰撞可以分为碰壁和互碰两种形式,而碰撞前后的运动形式也可以分为变速和匀速两 ...

  7. Flume官方文档翻译——Flume 1.7.0 User Guide (unreleased version)中一些知识点

    Flume官方文档翻译--Flume 1.7.0 User Guide (unreleased version)(一) Flume官方文档翻译--Flume 1.7.0 User Guide (unr ...

  8. Xen之初体验:XenMotion、 StorageMotion、Site Recovery、Power Management 各种新、高级功能免费

    Xenserver 的新版本6.2现在已经全面开源,省掉了原有的序列号,也能免费体验曾经标题中的付费高级功能. 安装镜像:http://downloadns.citrix.com.edgesuite. ...

  9. Unity调用Android类方法

    Unity调用Android类方法 1.  添加Unity的classes.jar文件 创建一个Android工程AndroidUnityDemo. 由于Unity的版本不同,直接在Unity安装包文 ...

  10. Cesium应用篇:3控件(5)CesiumInspector

    CesiumInspector控件并不是带来太多功能上的,但对开发人员来说,对于了解Cesium的渲染效果以及性能调优,还是一个很有价值的控件,特别是一些渲染状态下的问题,采用该控件,应该还是会有很多 ...