innerText vs innerHTML vs label vs text vs textContent vs outerText

javascript dom html

2022-08-30 02:41:02

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

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

innerText
innerHTML
label
text
textContent
outerText

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

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

我的发现是：

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

我的研究只能带我走得更远，因为我只能测试我能想到的东西或阅读发表的内容，任何人都可以确认我的研究是否正确，以及是否有任何特别之处？labelouterText

答案 1

来自 MDN：

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

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

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

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

因此，将不包括由CSS隐藏的文本，但会。innerTexttextContent

innerHTML 返回 HTML，正如其名称所指示的那样。通常，为了在元素中检索或编写文本，人们使用innerHTML。应改用文本内容。由于文本未解析为 HTML，因此它可能具有更好的性能。此外，这避免了XSS攻击媒介。

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

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

对于其他一些：基本上与相同，只是它包含它所属元素的开始和结束标签。我似乎根本找不到太多的描述。我认为这可能是一个模糊的遗留财产，应该避免。outerHTMLinnerHTMLouterText

答案 2

JLRishe其他优秀答案的附录：

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

假设你有一个带有HTML代码的元素：e<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!