我有一个由 Javascript 填充的下拉列表。
在决定加载时显示的默认值时，我意识到以下属性显示的值完全相同：
innerTextinnerHtmllabeltexttextContentouterText我自己的研究显示了基准测试或其中一些之间的比较，但不是全部。
我可以使用我自己的常识并选择 1 或另一个，因为它们提供相同的结果，但是，我担心如果数据发生变化，这将不是一个好主意。
我的发现是：
innerText 将按原样显示值并忽略可能包含的任何 HTML 格式innerHTML 将显示值并应用任何 HTML 格式label看起来和 一样innerText，所以我看不出区别text似乎innerText与 jQuery 速记版本相同textContent看起来与innerText但保持格式相同（例如\n）outerText 似乎与 innerText我的研究只能采取我太厉害，我只能考什么我能想到的或读到的东西发布后，任何一个可以确认但如果我的研究是正确的，如果有什么特别的label和outerText？
来自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 其他优秀答案的附录：
innerText 和outerText 都存在的原因是为了与innerHTML 和outerHTML 对称。当您分配给属性时，这变得很重要。
假设你有一个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!
下拉列表包含一组Option对象，因此您应该使用该.text属性来检查元素的文本表示，即
<option value="123">text goes here</option>
^^^^^^^^^^^^^^
顺便提一句，
.text似乎.innerText与 JQuery 速记版本相同
这是不对的；$(element).text()是 jQuery 版本，而element.text是属性访问版本。
text并label删除多余的空格。在下拉列表中查询选项时，我得到了这些结果：
e.textContent = "A B C D "
e.text = "A B C D"
e.label = "A B C D"
textContent 不会格式化 (\n)