所谓兼容性,就是看浏览器是否支持当前对象的属性或是方法,先通过获得页面文本内容的方式来了解兼容性,并封装函数或对象以解决此类问题。
获得页面文本内容的方式: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. KnockoutJS 3.X API 第六章 组件(3) 组件绑定

    组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 ...

  2. Nginx配置文件nginx.conf详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  3. 【转】oracle中in和exists的区别

    原文地址:http://blog.itpub.net/7478833/viewspace-441043/ 感谢作者   in 和 exists区别   in 是把外表和内表作hash join,而ex ...

  4. .Net 转战 Android 4.4 日常笔记(1)--工具及环境搭建

    闲来没事做,还是想再学习一门新的技术,无论何时Android开发比Web的开发工资应该高40%,我也建议大家面对移动开发,我比较喜欢学习最新版本的,我有java的基础,但是年久,已经淡忘,以零基础学习 ...

  5. ASP.NET MVC之从控制器传递数据到视图四种方式(一)

    前言 本系列开始着手讲述ASP.NET MVC,也算是自己对基础的回顾以及进一步深入学习,保证每天发表一篇该系列文章,关于基本知识则不再叙述,园子有关文章不胜枚举,这一系列若有叙述不当或错误之处,欢迎 ...

  6. 修复bootstrap daterangepicker中的3个问题

    最近项目中使用了一个基于Bootstrap的daterangepicker控件. 1.点击页面其他空白的地方,会把之前在日历上选中的日期选择上. 具体描述: 1.点击打开日期选择框 2.选择一个日期范 ...

  7. 如何利用脚本实现MySQL的快速部署以及一机多实例的部署

    MySQL有三个版本:二进制,源码包,RPM. 下面讲讲二进制包的安装过程 下载地址: http://dev.mysql.com/downloads/mysql/ 选择Linux-Generic 我这 ...

  8. php左侧分类列表显示菜单

    <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...

  9. spring源码分析之cache demo

    spring提供了对echache.guava.jcache的支持,先看一个echache的示例: import org.springframework.cache.CacheManager; imp ...

  10. chrome扩展程序开发

    首先,明确两个概念的区别:chrome扩展程序和Web Apps.具体参考:http://www.chromi.org/archives/10106 本文只讨论chrome扩展程序. 最好的开发教程莫 ...