我有一个由Javascript填充的下拉列表。
在决定应该在加载时显示的默认值时,我意识到以下属性显示的值完全相同:
innerText
innerHtml
label
text
textContent
outerText
我自己的研究显示基准测试或其中一些(但不是全部)之间的比较。
我可以使用自己的常识并选择1或其他,因为它们提供相同的结果,但是,我担心如果数据发生更改,这将不是一个好主意。
我的发现是:
innerHTML
\n
我的研究只能采取我太厉害,我只能考什么我能想到的或读到的东西发布后,任何一个可以确认但如果我的研究是正确的,如果有什么特别的label和outerText?
从MDN:
Internet Explorer引入了element.innerText。意图与[textContent]几乎相同,但有一些区别: * 请注意,虽然textContent获取所有元素的内容,包括<script>和<style>元素,但大多数等效的IE特定属性innerText却没有。 innerText也知道样式,不会返回隐藏元素的文本,而textContent会返回。 innerText知道CSS样式,它将触发重排,而textContent不会。
Internet Explorer引入了element.innerText。意图与[textContent]几乎相同,但有一些区别:
* 请注意,虽然textContent获取所有元素的内容,包括<script>和<style>元素,但大多数等效的IE特定属性innerText却没有。
<script>
<style>
innerText也知道样式,不会返回隐藏元素的文本,而textContent会返回。
innerText知道CSS样式,它将触发重排,而textContent不会。
因此innerText不会包含CSS隐藏的文本,但textContent会包含。
innerHTML返回其名称所指示的HTML。通常,为了检索或写入元素内的文本,人们使用innerHTML。应该使用textContent代替。因为文本没有被解析为HTML,所以它可能具有更好的性能。此外,这避免了XSS攻击媒介。
如果你错过了,让我再说一遍更清楚: 待办事项 不 使用.innerHTML,除非您特别的元素中打算插入HTML,并已采取必要的预防措施,以确保您插入HTML不能包含恶意内容。如果只想插入文本,请使用,.textContent或者如果需要支持IE8和更早版本,请使用功能检测在.textContent和之间关闭.innerText。
.innerHTML
.textContent
.innerText
拥有如此众多不同属性的主要原因是,不同的浏览器最初为这些属性使用了不同的名称,而对所有这些属性仍然没有完整的跨浏览器支持。如果您使用的是jQuery,则应坚持使用,.text()因为这旨在消除跨浏览器的差异。*
.text()
对于其他一些::outerHTML与基本上相同innerHTML,不同之处在于:它包括其所属元素的开始和结束标签。我似乎根本找不到太多描述outerText。我认为这可能是一种晦涩的遗产,应该避免。
outerHTML