1.innerHTML和innerText之间的区别
首先我在body标签中创建一个div子标签
<div id="box">
innerHTML和innerText之间的区别
<span>span标签</span>
</div>
然后我们在script标签中获取div元素,同时把div元素的属性在控制台打印出来
var box = document.getElementById('box');
console.dir(box);
我们可以在控制台找到innerHTML和innerText两个属性,它们的主要区别在哪呢?下面看代码
console.log(box.innerText);
console.log(box.innerHTML);
可以看见控制台的打印效果
从控制台的打印效果可以看出innerHTML原封不动的把div元素里面的内容呈现出来包括所有的空白,标签;而innerText只呈现标签中的文本内容。
2.innerText和textContent之间的区别
innerText和textContent的实现效果一样,只呈现文本内容。但是需要注意的地方在于innerText和textContent具有浏览器兼容问题,经过测试发现不同浏览器对它们的支持不一致
浏览器 | 版本 | innerHTML | textContent |
---|---|---|---|
Chrome | 支持 | 支持 | |
Firefox | 新版 | 支持 | 支持 |
Firefox | 旧版 | 不支持 | 支持 |
IE | IE9及以上 | 支持 | 支持 |
IE | IE9以下 | 支持 | 不支持 |
3.解决innerText和textContent的浏览器兼容问题
直接上代码
var box = document.getElementById('box');
console.log(getInnerHTML(box));
function getInnerHTML(element) {
/*
typeof用来检测属性的类型:
通过console.log(typeof box.innerText);检测
若浏览器支持innerText属性则检测出来innerText的类型为String
*/
if (typeof element.innerText === 'String') return element.innerText;
else return element.textContent;
}
这样我们就能解决兼容性问题