js中兼容性问题的封装(能力检测)

  所谓兼容性,就是看浏览器是否支持当前对象的属性或是方法,先通过获得页面文本内容的方式来了解兼容性,并封装函数或对象以解决此类问题。
获得页面文本内容的方式: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;
        }
    }

以后的工作和学习中有许多兼容性的问题,多了解封装的思想和方法。
时间: 2024-11-11 22:43:00

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

js中的cookie及封装

概念参考高级编程: 1.什么是cookie cookie是用于客户端储存会话的信息: 格式key=value: 2.cookie的构成 名称:一个唯一去顶的cookie的名称,不区分大小写,cookie的名称必须是经过URL编码的: 值:存储cookie中的字符串,值必须被URL编码 域:cookie对于哪个域是有效的,所有向该域发送的请求中都会包含这个cookie信息,这个值可以包含子域,也可以不包含这个cookie信息,如果没有明确设定,那么这个域会被认作来自设置cookie的那个域 路径:

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

基本数据类型:string,number,boolean,null,undefined,symbol 引用数据类型:object(array,function...) 常用的检测数据类型的方法一般有以下三种: 1.typeof 一般主要用来检测基本数据类型,因为它检测引用数据类型返回的都是object 还需要注意的一点是:typeof检测null返回的也是object(这是JS一直以来遗留的bug) typeof 1 "number" typeof 'abc' "string

JS中数组方法的封装之slice

slice方法的功能 // 1) : 数组的截取 // 2) :slice(m,n): 从数组索引m开始,截取到索引n,但是不包含n;[前包后不包] // slice(m) : 从索引m开始,截取到末尾: // slice():数组的克隆 slice(0); // // 索引负数: 让当前length+负数: // 3) : 返回值是截取的数组 // 4) : 原有数组不发生改变: /** * 首先:先分清楚slice有几种情况,slice的思想 * 传的参数可以是其他类型的数据,只要能转成有效

《JS中的面向对象技术》

内容要点: 1.什么是对象:JS权威指南学习总结-第六章 ,(有句话:一切都是对象) 2.什么面向对象 使用对象时,只关注对象提供的功能,不关注其内部细节,比如jQuery.面向对象是一种通用思想,并非只有编程中使用,任何事情都可以用. 3.JS中面向对象三大特征: 封装.继承.多态 4.JS自定义对象(三大对象两大属性): 4.1创建对象方式:方法1:对象初始化的方法,就是通过对象直接量创建的对象.方法2:通过关键字new和构造函数的方法创建对象 4.2对象属性定义:私有属性.对象属性.类属性

JS中的自执行函数

本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for JavaScipt开发教程>而临阵磨枪. 在接触JS一段时间后,觉得还是比较灵活的,灵活的前提是要更深入的了解,就像两个陌生的人,相处的时间长了,了解的时间长了,难免会产生感情一样.对于JS也开始产生了感情,这种感情体现在工作中,体现在周围的环境中. 目前很多开发者纷纷加入JS的阵营,看来这已经不是跟风

JS中出现的兼容性问题的总结

JS中出现的兼容性问题的总结1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式,当我们需要获取行外样式时: 我们一般通过这两个方法获取行外样式: IE下: currentStyle Chrome,FF下: getComputedStyle(oDiv,false) 兼容两个浏览器的写法: if(oDiv.currentStyle){ alert(oDiv.currentStyle.width); }

JS中的类型检测

JS中用于类型检测的函数有typeof.instanceof .Object.prototype.toString.constrcutor.duck type typeof用于检测基本类型和函数 有些特殊情况 null.数组.Date数据类型用typeof判断返回的是object instanceof用来判断对象类型,基于原型链,可以用来判断数组和Date数据类型

log4js-Node.js中的日志管理模块使用与封装

开发过程中,日志记录是必不可少的事情,尤其是生产系统中经常无法调试,因此日志就成了重要的调试信息来源. Node.js,已经有现成的开源日志模块,就是log4js,源码地址:点击打开链接 项目引用方法: npm install log4js 1.配置说明(仅以常用的dateFile日志类型举例,更多说明参考log4js-wiki): { "appenders": [ // 下面一行应该是用于跟express配合输出web请求url日志的 {"type": "

js中数组的检测方法

在js中可以使用Object.prototype.toString.call()的来检测一个对象是否为一个数组 //检测数组 var a = [1, 2]; console.log(typeof a); //object console.log(Object.prototype.toString.call(a)); //[object Array] //检测字符串 var s = "you"; console.log(typeof s); //string console.log(Ob