我有一个由Javascript填充的下拉列表。
在决定加载时应该显示什么默认值时,我意识到以下属性显示了完全相同的值:
innerText
innerHtml
label
text
textContent
outerText
我自己的研究显示了一些基准测试或它们之间的比较,但不是全部。
我可以使用自己的常识,选择一个或另一个,因为它们提供了相同的结果,但我担心,如果数据发生变化,这将不是一个好主意。
我的发现是:
innerText
将按原样显示值,并忽略任何可能为includedinnerHTML
的超文本标记语言格式。outerText
将显示值并应用任何超文本标记语言formattinglabel
显示为与innerText
相同,因此我看不到versiontextContent
显示为与jQuery相同,但innerText
速记version
textContent
显示为与innerText
相同,但保留格式(如\n
) can显示为与innerText
相同我的研究只能带我走到这一步,因为我只能测试我能想到的东西或阅读发表的东西,尽管我的研究是否正确,以及label
和outerText
是否有什么特殊之处,但是否有人能证实我的研究是正确的
发布于 2014-06-26 18:27:03
来自MDN
Internet Explorer引入了element.innerText。其意图与textContent基本相同,但有几点不同:
<script>
和<style>
元素,但最等效的特定于IE的属性innerText则不能。所以innerText
不会包含CSS隐藏的文本,但textContent
会包含。
正如其名称所示,
innerHTML返回超文本标记语言。通常,为了在元素中检索或写入文本,人们使用innerHTML。应该改用textContent。因为文本不会被解析为HTML,所以它可能具有更好的性能。此外,这避免了XSS攻击向量。
如果您遗漏了这一点,让我更清楚地重复一遍:除非您特别打算在元素中插入,并且已经采取了必要的预防措施以确保您要插入的不包含恶意内容,否则不要使用.innerHTML
。如果只想插入文本,请使用.textContent
,或者如果需要支持IE8和更早版本,请使用特征检测在.textContent
和.innerText
__之间切换。
有这么多不同的属性的一个主要原因是不同的浏览器最初对这些属性有不同的名称,并且仍然没有对所有这些属性的完全跨浏览器支持。如果你正在使用jQuery,你应该坚持使用.text()
,因为它旨在消除跨浏览器的差异。*
对于其他一些元素:outerHTML
基本上与innerHTML
相同,只是它包含了它所属元素的开始和结束标记。我似乎找不到太多关于outerText
的描述。我认为这可能是一个模糊的遗留属性,应该避免。
发布于 2016-09-01 12:22:12
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!
发布于 2014-06-26 18:33:14
下拉列表由Option
对象的集合组成,因此您应该使用.text
属性来检查元素的文本表示形式。
<option value="123">text goes here</option>
^^^^^^^^^^^^^^
顺便说一句,
.text
似乎与.innerText
相同,但却是JQuery速记版本
这是不正确的;$(element).text()
是jQuery版本,而element.text
是属性访问版本。
https://stackoverflow.com/questions/24427621
复制相似问题