乐趣区

浅谈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]
好像看起来一样的呢。那么我们再来一点改变吧!

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