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