innerText vs innerHtml vs label vs text vs textContent vs 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.我认为这可能是一个不起眼的遗产,应该避免.

Answer 2

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

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

顺便说一句,

.text似乎.innerText与JQuery简写版本相同

那不对; $(element).text()是jQuery版本,而element.text属性访问版本.

Answer 3

text并label删除多余的空格。在查询下拉列表中的选项时，我得到了这些结果：

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

Answer 4

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!