innerText vs innerHTML vs label vs text vs textContent vs outerText

Posted 2023-03-05

【中文标题】innerText vs innerHTML vs label vs text vs textContent vs outerText

【英文标题】：

【发布时间】：2014-08-17 03:14:35

【问题描述】：

我有一个由 javascript 填充的下拉列表。

在决定加载时显示的默认值时，我意识到以下属性显示的值完全相同：

innerText innerhtml label text textContent outerText

我自己的研究显示了一些基准测试或比较，但不是全部。

我可以根据自己的常识选择 1 或其他，因为它们提供相同的结果，但是，我担心如果数据发生变化，这将不是一个好主意。

我的发现是：

innerText 将按原样显示值并忽略可能包含的任何 HTML 格式 innerHTML 将显示值并应用任何 HTML 格式 label 好像和innerText 一样，所以看不出区别 text 似乎与 innerText 相同，但为 jQuery 速记版本 textContent 看起来与 innerText 相同，但保留格式（例如 \n） outerText 似乎与 innerText 相同

我的研究只能让我走到尽头，因为我只能测试我能想到的或阅读已发表的内容，任何人都可以确认我的研究是否正确以及label 和 @987654349 是否有什么特别之处@?

【问题讨论】：

访问文本的方式如此之多的原因之一是跨浏览器的差异。如果您已经在使用 jQuery，您应该使用 .text() 来获取元素的文本内容，因为这将提供最大的跨浏览器支持。

developer.mozilla.org/en-US/docs/Web/API/…

MDN 文档：innerText、innerHTML (for ShadowRoots)、label and text（label 和 text 也存在于许多与媒体相关的原型中）、textContent、 outerText.

也相关：outerHTML、nodeValue、wholeText。

【参考方案1】：

来自MDN：

Internet Explorer 引入了 element.innerText。意图与 [as textContent] 几乎相同，但有一些不同之处：

请注意，虽然 textContent 获取所有元素的内容，包括 <script> 和 <style> 元素，但大多数等效的 IE 特定属性 innerText 却没有。

innerText 也知道样式，不会返回隐藏元素的文本，而 textContent 会。

由于 innerText 知道 CSS 样式，它会触发重排，而 textContent 不会。

所以innerText 不会包含被 CSS 隐藏的文本，但textContent 会。

innerHTML 如其名称所示返回 HTML。很多时候，为了在元素中检索或写入文本，人们使用 innerHTML。应该使用 textContent 代替。因为文本不被解析为 HTML，所以它可能具有更好的性能。此外，这避免了 XSS 攻击向量。

如果您错过了，让我更清楚地重复一遍：不要不要使用.innerHTML，除非您特别打算在元素中插入 HTML 并已采取必要的预防措施以确保您插入的 HTML 不能包含恶意内容。如果您只想插入文本，请使用.textContent，或者如果您需要支持 IE8 及更早版本，请使用功能检测在.textContent 和.innerText 之间关闭。

有这么多不同属性的一个主要原因是，不同的浏览器最初对这些属性有不同的名称，并且仍然没有对所有这些属性进行完整的跨浏览器支持。如果您使用 jQuery，则应坚持使用 .text()，因为它旨在消除跨浏览器的差异。*

对于其他一些：outerHTML 与innerHTML 基本相同，只是它包含了它所属元素的开始和结束标记。我似乎根本找不到对outerText 的太多描述。我认为这可能是一个不起眼的遗留属性，应该避免。

【讨论】：

该文档的建议 in order to retrieve or write text within an element, people use innerHTML. textContent should be used instead 的问题在于，IE 8 不支持 textContent，IE 8 仍在广泛使用，因为这是与 Windows 捆绑在一起的版本7. FireFox 不支持innerText。因此，虽然 innerHTML 不是非常适合该目的，但它具有更好的跨浏览器可靠性。

@AdiInbar 如果您需要支持旧浏览器，正确的做法是使用特征检测在.textContent 和.innerText 之间关闭，或者使用像jQuery 这样的东西来平滑这些浏览器差异。

非常感谢您的解释！我正在使用 flot 来显示图表，但它没有显示在 ff 中，因为 ff 使用 textContent。当我使用 tickFormatter 时，Innertext 总是未定义。

@bvl 您不能将textContent 与 HTML 标记一起使用。如果需要插入 HTML，可以使用.innerHTML 或使用document.createElement() 等构建 HTML 节点。

安全性： innerHTML 的错误使用（与textContent 不同）可能会为您的应用程序的 XSS（跨站点脚本）攻击打开大门。如果通过innerHTML 插入DOM 的内容不完全受信任，攻击者可以使用<script> 元素劫持在用户或管理员授权级别下通过身份验证的应用程序。在这种情况下，只需使用textContent 而不是危险的innerHTML，就可以有效地摧毁所有攻击，包括像<img src="x.x" onerror="alert('Hacked!');"/> 这样看起来很奇怪的攻击和无数偷偷摸摸的攻击。

【参考方案2】：

JLRishe 的其他出色答案的附录：

innerText 和outerText 都存在的原因是为了与innerHTML 和outerHTML 对称。当您分配属性时，这一点变得很重要。

假设你有一个元素 e 和 HTML 代码 <b>Lorem Ipsum</b>：

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

【参考方案3】：

下拉列表包含Option 对象的集合，因此您应该使用.text 属性来检查元素的文本表示，即

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

顺便说一句，

.text 似乎与.innerText 相同，但为 JQuery 速记版本

这是不正确的； $(element).text() 是 jQuery 版本，而 element.text 是属性访问版本。

【参考方案4】：

text 和 label 删除多余的空格。在下拉列表中查询选项时，我得到了这些结果：

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"

【讨论】：

投了赞成票，因为每个人都在谈论其他人，但你是唯一一个比较label和text的人

@Lars-Lasse 是的，它们是 DOM API 的一部分；正如答案所暗示的，他们是HTMLOptionElements 上的getter / setter。见Web IDL definitions in the HTML spec。此答案可能具有误导性且不完整。

@SebastianSimon 谢谢伙计，没有注意到它与 标签有关。删除了评论。

【参考方案5】：

textContent 不会格式化 (\n)

【参考方案6】：

如果您针对特定浏览器，请参阅浏览器兼容性http://www.quirksmode.org/dom/html/。因为似乎他们都有自己的做事方式。这就是为什么如果您不想摆弄，最好使用 JQuery .text() (http://api.jquery.com/text/)。