innerHTML, outerHTML, innerText, outerText, textContent

最新推荐文章于 2023-08-10 10:36:16 发布

little_little0_0

最新推荐文章于 2023-08-10 10:36:16 发布

阅读量477

点赞数

分类专栏： HTML&CSS基础文章标签： HTML元素属性浏览器兼容问题

本文链接：https://blog.csdn.net/little_little0_0/article/details/78573170

版权

HTML&CSS基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

标题中提到的这些属性都是用来获取元素内容的，那么它们的区别是什么呢？各大浏览器的兼容性又是怎么样的呢？

innerHTML/outerHTML

首先，我们说说对innerHTML的赋值操作：先对拥有该属性的元素从标签开始处到标签结束处进行模式匹配，然后将处理后的值赋予给innerHTML属性（除了单独的<, >, &会被转换为实体名外，其他内容会被原封不动地赋给innerHTML属性）单独的"<"会转换为"<"，单独的">"会转换为">"，单独的"&"会转换为"&"。

innerHTML属性是W3C标准规定的，所有主流浏览器（IE， Firefox， Chrome和Safari）都支持。它可以获取从对象的起始位置到终止位置的所有内容，包括其内部的html标签，而outerHTML除包含这些外还包含它自己的标签名。例如：

<div id="d1">
    <p id="p1">1111</p>
</div>

<script>
    var d1 = document.getElementById("d1");
    var p1 = document.getElementById("p1");
    console.log("d1.outerHTML:\n" + d1.outerHTML);
    console.log("d1.innerHTML:\n" + d1.innerHTML);
</script>

输出结果为：

d1.outerHTML: 
<div id="d1">
    <p id="p1">1111</p>
</div>
d1.innerHTML: 
    <p id="p1">1111</p>

innerText/outerText

innerText属性和outerText属性返回相同的值。其实际取值就是在返回前对innerHTML属性值进行一系列处理：

1、对HTML标签进行解析；

2、对CSS样式进行带限制的解析和渲染；

3、将ASCII实体转换成对应的字符；

4、剔除格式信息（如/t， /r 和/n等），将多个连续的空格合并为一个。

innerText属性是IE浏览器最先实现的，后来Chrome也实现了。所以现在支持innerText和outerText属性的浏览器有IE，Safari和Chrome。新版的Firefox浏览器（至于哪一版我也不是很清楚，我自己现在的Firefox浏览器是支持的）也支持innerText属性，但还不支持outerText属性。

textContent

该属性也会先获取innerHTML的值，然后在返回前进行一系列的处理：

1、对HTML标签进行剔除；（注意和innerText的区别）；

2、将ASCII实体转化成相应的字符。

支持该属性的浏览器有：IE9-11, Firefox,Chrome和Safari。