PHP笔记网

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

参考：小tips: JS DOM innerText和textContent的区别