innerText，innerHTML，label，text，textContent，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。意图与[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。我认为这可能是一种晦涩的遗产，应该避免。