浅谈innerHTMLinnerTextouterHTMLoutText和textConten | 乐趣区

最近在看书时看到innerHTML,innerText,outerHTML,outText和textConten这几个的属性,想研究研究,并分享一些自己的看法。
首先谈谈innerHTML和innerText这两个属性。对于解释，innerHTML在写模式下会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。而innerText在写模式下，会删除元素的所有子节点，插入包含相应文本值的文本节点。话不多说！！先上代码。

    <!DOCTYPE html>    <html>    <head>    <meta charset="UTF-8">    <title>innerHTML和innerText.html</title>    <style type="text/css">    body{    text-align: center;    }        </style>    </head>    <body>    <h1>innerHTML和innerText的区别</h1>    <h2>下面是内容展示区</h2>    <p id="changeText">这段文字主要用来区别两者的不同,注意这里的<strong>加粗部分</strong>!!!</p>    <button onclick="inHTML()">点击显示innerHTML变化</button>    <button onclick="inTEXT()">点击显示innerText变化</button>        <script type="text/javascript">    function inHTML(){    var text=document.getElementById("changeText");    text.innerHTML="我因为innerHTML发生了改变";    }    function inTEXT(){    var text=document.getElementById("changeText");    text.innerText="我因为innerText发生了改变";    }    </script>    </body>![测试时][1]当我们点击对应按钮的时候，就会出现对应的情况![图片描述][2]![图片描述][3]好像看起来一样的呢。那么我们再来一点改变吧！

我们给两段内容中又添加了一个strong的子节点,来看看能否识别html标签![图片描述][4]显而易见,innerHTML能够识别到html的标签而innerText无法识别,所以直接当做文字处理。简单来说innerHTML插入html代码块，innerText插入文本值块。那么innerHTML能插入注释吗？我们来看看。把对应的文字注释掉，然后按按钮发现，注释一样能被解析。文字因注释掉而见不到了！![图片描述][5]显而易见,innerHTML能够识别到html的标签而innerText无法识别,所以直接当做文字处理。简单来说innerHTML插入html代码块，innerText插入文本值块。那么innerHTML能插入注释吗？我们来看看。把对应的文字注释掉，然后按按钮发现，注释一样能被解析。文字因注释掉而见不到了！![图片描述][6]

function inHTML(){
var text=document.getElementById("changeText");
text.innerHTML="设置的字符串1 & 设置的字符串2 ，"来点特殊的吧"!";
}

![图片描述][7]在使用转义字符和标签还有特殊符号时，似乎得到的结果也与预期的一致。那么我们来看看innerText的结果如何。![图片描述][8]惊喜发现，对于转义字符和特殊字符，innerText还是能理解的呀。所以在写模式下我得出来的结论是：innerHTML根据指定的值创建新的DOM树能替换调用原先html元素中的所有子节点（包括注释、特殊字符）。而innerText则能替代相应文本节点，能理解部分特殊字符，但无法解析html标签。在写模式下我的结论是如此的，那么在读的模式下呢？我们也来实验下吧。首先从最基本的包含一个html标签的文字试验下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML和innerText.html</title>
<style type="text/css">
body{
text-align: center;
}

</style>
</head>
<body>
<h1>innerHTML和innerText的区别</h1>
<h2>下面是内容展示区</h2>
<p id="changeText">这段文字主要用来区别两者的不同,注意这里的加粗部分!!!</p>
<button onclick="inHTML()">点击显示innerHTML的读取结果</button>
<button onclick="inTEXT()">点击显示innerText的读取结果</button>

我们先看看两个结果！当点击innerHTML时显示结果为> 这段文字主要用来区别两者的不同,注意这里的<strong>加粗部分</strong>!!!当点击innerText时显示为这段文字主要用来区别两者的不同,注意这里的加粗部分!!!那么对于特殊的格式情况下呢？相应的添加一些特殊情况，并且修改下格式

<ul>
<li>这里主要看代码缩进</li>
<li>这里看<span>包裹情况</span></li>
<li>这里看"转义字符"!</li>
</ul>
function inHTML(){
var text=document.getElementById("readText");
console.log(text.innerHTML);

}
function inTEXT(){
var text=document.getElementById("readText");
console.log(text.innerText);

}

看下结果，首先是innerHTML的

<li>这里主要看代码缩进</li>
<li>这里看<span>包裹情况</span></li>
<li>这里看"转义字符"!</li>、

然后是innerText的

这里主要看代码缩进
这里看包裹情况
这里看"转义字符"!

因为在body中设置文字居中，所以innerHTML保存了对应的缩进。这里先得出来一个结论：innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。我突然有疑问，对于不同浏览器，他的读取结果是否一致呢？我只测试了三个浏览器CHROME版本 74.0.3729.157（正式版本） （64 位）FireFox版本 67.0IE 版本 11.0.9600.16428这三个版本的浏览器对应结果一致，，并没有出现像文档中提到的标签转换为大小写，空格和缩进不一致等问题，可能是兼容性做的很好了吧。看完了innerHTML与innerText的区别。我们来看看innerHTML和outerHTML还有innerText和outerText的区别吧。继续上面的例子我们把对应内容更改一下，得到了下面两个结果。

<ul id="readText">
<li>这里主要看代码缩进</li>
<li>这里看<span>包裹情况</span></li>
<li>这里看"转义字符"!</li>
</ul>

还有outerText的结果

<ul id="readText">
<li>这里主要看代码缩进</li>
<li>这里看<span>包裹情况</span></li>
<li>这里看"转义字符"!</li>
</ul>

我们看到了ul的出现，并且对应的格式也发生了变化。结论：1）innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签outerHTML除了包含innerHTML的全部内容外, 还包含对象标签本身。2）innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。outerText除了包含innerText的全部内容外，还包含对象标签本身因为我们实验用到的标签时ul的id，所以对象标签本身就是ul。对于inner来讲最直接的理解就是不算ul，从第一个li到最后一个/li之间就是inner，outer来讲，最直接的理解就是ul和/ul间。最后就是textContent和innerText之间的区别了。废话不多说之间先上代码。

<button onclick="inTEXT()">点击显示innerText的读取结果</button>
<button onclick="textCon()">点击显示TextContent的读取结果</button>
//省略部分代码
<script type="text/javascript">
function inTEXT(){
var text=document.getElementById("readText");
console.log(text.innerText);

}
function textCon(){
var text=document.getElementById("readText");
console.log(text.textContent);

}
</script>

下面是结果![图片描述][9]同样因为文字居中的效果,innerText和textContent的作用都是获取元素之间的文本内容，但是他们的表现是不同的innerText的值依赖于浏览器的显示，textContent依赖于代码的显示简单说,就是textContent受空格、换行和缩进的影响。而innerText只受换行影响。同样的，对于我测试用的三个浏览器，均实现了相同的效果，也说明了兼容性已经做的非常好了。通过上面的例子选择用什么取决于需求！感谢你们看完我写的一点小看法！  [1]: /img/bVbs6L8  [2]: /img/bVbs6Ma  [3]: /img/bVbs6Md  [4]: /img/bVbs6Mz  [5]: /img/bVbs61l  [6]: /img/bVbs61t  [7]: /img/bVbs61w  [8]: /img/bVbs61z