如何在 innerText 或 nodeValue 之间进行选择？

Posted 2023-02-21

【中文标题】如何在 innerText 或 nodeValue 之间进行选择？

【英文标题】：How do I choose between innerText or nodeValue?

【发布时间】：2010-12-18 02:57:30

【问题描述】：

当我需要更改 span 元素中的文本时，我应该使用哪一个，有什么区别：

var spnDetailDisplay=document.getElementById('spnDetailDisplay');
spnDetailDisplay.innerText=sDetail;

或

 var spnDetailDisplay=document.getElementById('spnDetailDisplay');
 spnDetailDisplay.childNodes[0].nodeValue=sDetail;

【问题讨论】：

这能回答你的问题吗？ innerText vs innerhtml vs label vs text vs textContent vs outerText

【参考方案1】：

对于带有文本内容的元素，它们是相同的。有关nodeValue 的信息，请参阅this MDC article。

来自this article：

如果元素没有子元素，只有文本，那么它（通常）有一个子节点，以ElemRef.childNodes[0] 访问。在这种精确的情况下，ElemRef.innerText 的 W3C 网络标准等效为 ElemRef.childNodes[0].nodeValue。

【参考方案2】：

nodeValue

是 W3C 的标准推荐。

innerText

是 Internet Explorer 特定的，而不是标准。和： 不返回<script> 和<style> 的内容。 样式感知，不返回隐藏元素的文本。 CSS 样式感知，它会触发重排。

但是，截至 2016 年 3 月的所有主要浏览器版本都支持 innerText。

总的来说，它们是相似的，但如果你需要最好的性能，应该使用 nodeValue。

性能测试链接：https://jsperf.com/read-innerhtml-vs-innertext-vs-nodevalue-vs-textcontent/13