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。意图与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

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

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

顺便说一下，

.text似乎与.innerText相同，但是JQuery简写版

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

Answer 3

JLRishe的其他优秀答案附录：

innerText和outerText都存在的原因是innerHTML和outerHTML的对称性。当您将分配给该属性时，这一点变得非常重要。

假设您有一个包含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!

Answer 4

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

Answer 5

textContent不会格式化（\ n）

Answer 6

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

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

innerText vs innerHtml vs label vs text vs textContent vs outerText

6 个答案: