innerHtml可以识别html元素
innerText和textContent只能识别为纯文本
<div class="box">
div元素内容
<p>
p元素内容<span style="display: block;">...</span>
<span style="display: none;">隐藏内容</span>
</p>
</div>
<script>
var p = document.getElementsByTagName('p')[0];
console.log('innerHTML:', p.innerHTML);
console.log('innerText:', p.innerText);
console.log('textContent:', p.textContent);
</script>
输出：
innerHTML:
p元素内容<span style="display: block;">...</span>
<span style="display: none;">隐藏内容</span>
innerText: p元素内容
...
textContent:
p元素内容...
隐藏内容
总结：
- innerHTML可以获取完整的html元素，包括元素上的一些属性，innerText和textContext都只能获取文本内容
- innerText会保留块级元素的换行特性且获取不到隐藏的内容（visibility：hidden；或 display：none；）
- 由于innerText属性值的获取会考虑CSS样式，因此读取innerText将触发回流以确保计算出的样式是最新的，而回流在计算上很昂贵，会降低性能。而textContent只是单纯读取文本内容，因此性能更高。（vue的 v-text 指令就是更新元素的 textContent）
所以，获取文本内容推荐使用textContent，获取html内容使用innerHTML。
