innerText、innerHtml、Label与TextContent与OutterText的区别和关系分别是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (68)

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

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

  • innerText
  • innerHtml
  • label
  • text
  • textContent
  • outerText

我自己的研究显示了基准测试或其中几项比较,但不是全部。

我的发现是:

  • innerText 将显示值,并忽略可能包含的任何HTML格式
  • innerHTML 将显示该值并应用任何HTML格式
  • label看起来像是一样innerText,我看不出有什么不同
  • text看起来和innerTextjQuery速记版本一样
  • textContent看起来像是一样innerText但保持格式化(如\n
  • outerText 似乎是一样的 innerText

我的研究只能让我测试我能想到的东西或阅读发表的内容,但是如果我的研究是正确的,并且有什么特别的我没有注意到的吗?

提问于
用户回答回答于

来自MDN:

Internet Explorer引入了element.innerText。其意图与textContent几乎相同,但有几点不同:

  • 请注意,虽然textContent获取所有元素(包括<script><style>元素)的内容,但大多数等效的特定于IE的属性innerText不会。
  • innerText也知道样式,不会返回隐藏元素的文本,而textContent会。
  • 由于innerText知道CSS样式,它将触发回流,而textContent不会。

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

innerHTML按名称指示返回HTML。通常,为了在元素中检索或写入文本,人们使用innerHTML。应该使用textContent代替。由于文本未被解析为HTML,因此可能会有更好的性能。而且,这避免了XSS攻击向量。

有这么多不同属性的主要原因是,不同的浏览器原来对这些属性有不同的名称,并且对于所有这些属性还没有完全的跨浏览器支持。如果使用的是jQuery,那么您应该坚持,.text()因为它旨在消除跨浏览器差异。

对于其他一些:除了它包含它所属的元素的开始和结束标记之外outerHTML基本上是相同的innerHTML。

用户回答回答于

下拉列表包含一组对象,因此您应该使用该属性来检查元素的文本表示形式,即Option.text

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

顺便说一句,

.text看起来和.innerTextJQuery速记版本一样

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

扫码关注云+社区

领取腾讯云代金券