乐趣区

浅谈innerHTMLinnerTextouterHTMLoutText和textConten

jiezi

最近在看书时看到 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]
好像看起来一样的呢。那么我们再来一点改变吧！

<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>

我们给两段内容中又添加了一个 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>

<script type=”text/javascript”>
function inHTML(){
var text=document.getElementById(“changeText”);
console.log(text.innerHTML);
}
function inTEXT(){
var text=document.getElementById(“changeText”);
console.log(text.innerText);
}
</script>
</body>
</html>

我们先看看两个结果！当点击 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.0

IE 版本 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
退出移动版