原生js中innerText和textContent的兼容性处理

最新推荐文章于 2024-03-21 04:49:18 发布

每一天，每一步

最新推荐文章于 2024-03-21 04:49:18 发布

阅读量538

点赞数

分类专栏： javaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/u010234868/article/details/117899009

版权

javaScript 专栏收录该内容

136 篇文章

订阅专栏

<div id="box">hello world</div>

兼容性：
1、innerText：chrome、新版firefox、IE9+、旧版IE；
2、textContent ：chrome、新版firefox、旧版firefox、IE9+。
设置元素内容：
1、当设置不含标签内容的时候应该使用innerText，效率高；
2、innerHTML解析含标签内容。

// 写一个兼容性处理函数   兼容性处理在一些库中已经处理 比如jQuery
// var div = document.getElementsByTagName('div');
// // console.dir(div);
// // console.log(div[0].innerHTML);
// // console.log(div[0].innerText);
// // console.log(div[0].textContent);
// console.log(getInnerText(div[0]));
// 兼容性处理第一种方式：
// function getInnerText(ele) {
// 	if (ele.innerText === undefined) {
// 		return ele.textContent;
// 	} else {
// 		return ele.innerText;
// 	}
// }

var box = document.getElementById('box');
console.log(box.a);  // undefined
console.log(box.id);  // box
console.log(typeof box.a); // undefined
console.log(typeof box.id);   // string  能找到这个属性
console.log(getInnerText(box)); // hello world
// 兼容性处理第二种方式：
function getInnerText(element) {
	if (typeof element.innerText === 'string' ) {
		return element.innerText;
	} else {
		return element.textContent;
	}
}