innerText，innerHTML，label，text，textContent，outerText

124

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

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

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

我自己的研究显示基准测试或其中一些（但不是全部）之间的比较。

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

我的发现是：

  • innerText 将按原样显示该值，并忽略可能包含的任何HTML格式
  • innerHTML 将显示值并应用任何HTML格式
  • label似乎与相同innerText，所以我看不到区别
  • text似乎innerText与jQuery简写版本相同
  • textContent看起来与相同，innerText但保持格式（例如\n）
  • outerText 似乎与 innerText

我的研究只能采取我太厉害，我只能考什么我能想到的或读到的东西发布后，任何一个可以确认但如果我的研究是正确的，如果有什么特别的label和outerText？

javascript  html  dom 
— MyDaft问题
source
11
访问文本的方法如此之多的原因之一是由于跨浏览器的差异。如果您已经在使用jQuery，则应该使用.text()来获取元素的文本内容，因为这将提供最大的跨浏览器支持。
— JLRishe 2014年
2
— JLRishe

Answers:

101

从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攻击媒介。

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

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

对于其他一些：：outerHTML与基本上相同innerHTML，不同之处在于：它包括其所属元素的开始和结束标签。我似乎根本找不到太多描述outerText。我认为这可能是一种晦涩的遗产，应该避免。

— JLRishe
source
3
与文档的建议的问题，in order to retrieve or write text within an element, people use innerHTML. textContent should be used instead是，的textContent不会被IE 8，目前还处于相当广泛使用，因为这是与Windows 7和Firefox捆绑不支持的版本支持的innerText。因此，尽管innerHTML并不是理想的选择，但它具有更好的跨浏览器可靠性。
— 阿迪·英巴尔
5
@AdiInbar如果您需要支持旧的浏览器，则正确的做法是使用功能检测在.textContent和之间切换.innerText，或者使用类似jQuery的功能来消除这些浏览器之间的差异。
— JLRishe
1
非常感谢您的解释！我正在使用flot来显示图表，但未在ff中显示，因为ff使用textContent。当我使用tickFormatter时，内部文本始终是未定义的。
— Rainhider
1
@bvl不能textContent与HTML标记一起使用。如果您需要插入HTML，你要么使用.innerHTML或者建立HTML节点使用document.createElement()，等等
— JLRishe
4
安全性：不正确的使用innerHTML（与不同textContent）可以为您的应用程序进行XSS（跨站点脚本）攻击打开大门。如果innerHTML不完全信任通过插入到DOM中的内容，则攻击者可能会使用一个<script>元素来劫持在用户或管理员授权级别下进行身份验证的应用程序。<img src="x.x" onerror="alert('Hacked!');"/>通过简单地textContent在此上下文中使用而不是危险的方法，可以有效地销毁所有攻击，包括看起来很怪异的攻击（例如像像鬼斧神一样的偷袭者和无数次的偷偷摸摸的偷袭者）innerHTML。
— ChaseMoskal
8

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

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

顺便说一句，

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

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

— 插口
source
5

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

innerText和externalText都存在的原因是为了与innerHTML和externalHTML对称。分配给属性时，这一点很重要。

假设您有一个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!
— 匿名
source
0

text并label删除多余的空间。查询下拉菜单中的选项时得到以下结果：

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"
— 周杰伦
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.