innerText vs innerHTML vs label vs text vs textContent vs outerText

Question

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

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

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

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

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

我的发现是：

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

我的研究只能带我到我只能测试我能想到的或阅读已发表的内容的范围内，任何人都可以确认我的研究是否正确以及label和outerText是否有什么特别之处？

Answer 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的太多描述。 我认为这可能是一个不起眼的遗留财产，应该避免。

Answer 2

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

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

假设您有一个带有 HTML 代码<b>Lorem Ipsum</b>的元素e ：

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!

Answer 3

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

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

顺便提一句，

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

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

Answer 4

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

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

Answer 5

textContent不会格式化 (\n)

Answer 6

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