InnerText vs innerHTML vs label vs text vs textContent vs outerText

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

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

  • innerText
  • innerHTML
  • label
  • text
  • textContent
  • outerText

我自己的研究表明，基准评分测试或其中一些测试之间的比较，但不是全部。

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

我的发现是:

  • innerText将显示原来的值，并忽略可能包含的任何 HTML 格式
  • innerHTML将显示该值并应用任何 HTML 格式
  • label看起来和 innerText是一样的，所以我看不出有什么不同
  • text似乎与 innerText相同，但是使用了 jQuery 的简写版本
  • textContent看起来与 innerText相同，但保持格式化(例如 \n)
  • outerText似乎与 innerText相同

我的研究只能带我到目前为止，我只能测试我能想到什么或阅读发表了什么，有没有人可以证实我的研究是正确的，如果有什么特殊的 label和 outerText？

91649 次浏览
小开
最佳答案

来自 MDN:

Internet Explorer 引入了 element.innerText，其意图与 textContent 大致相同，但有几个不同之处:

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

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

  • 由于 innerText 了解 CSS 样式，因此它将触发一个 reflow，而 textContent 不会。

因此，innerText不会包含 CSS 隐藏的文本，但是 textContent会。

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

如果你没有注意到这一点，让我更清楚地重复一遍: 除非您特别打算在元素中插入 HTML 并已采取必要的预防措施以确保所插入的 HTML 不包含恶意内容，否则请使用 < strong > not use ABC0。如果你只想插入文本，使用 ABC1或者如果你需要支持 IE8或更早的版本，使用特征提取在 ABC1和 .innerText之间切换。

有这么多不同属性的一个主要原因是，不同的浏览器最初对这些属性有不同的名称，而且仍然没有完全的跨浏览器支持所有这些属性。如果您使用的是 jQuery，那么您应该坚持使用 .text()，因为它的设计目的是消除跨浏览器的差异。*

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

小开

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

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

顺便说一句,

.text似乎与 .innerText相同，但是使用了 JQuery 的简写版本

不对; $(element).text()是 jQuery 版本，而 element.text是属性访问版本。

小开

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

小开

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!
小开

textContent不会格式化(n)

小开

text和 label去掉了额外的空格。我在下拉列表中查询选项时得到了以下结果:

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

提交答案