innerHTML、innerText、textContext和value的区别

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。

参考：https://www.zhangxinxu.com/wordpress/?p=8941