当我们想要取出一段页面中的文本的时候,有时在使用innerHTML,innerText,textContent和value中的任何一个方法取出的值是一样的,这时会给使用者一种错觉,他们的作用是一样的,但是这是真的吗?
那么接下来我们来了解下innerHTML,innerText,textContent和value分别是什么
1.innerHTML
首先来看MDN的解释:Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。
innerHTML会获取页面中html标签起始至标签结束中间的所有内容包括后代元素的html标签与其中的内容,
对自结尾的html标签和伪元素中无效(例:<img/>)。并会将& , < , > 转义为 &, < 和 >
通过innerHTML进行赋值会清空所选标签内的所有内容后在进行赋值
此时若我们要取当前div中的值因为会导致特殊文本的转义这时候用innerHTML就不是很合适了。
2.innerText
innerText最早是由IE引入的,并于2016年正式成为了HTML的标准,
innerText会获取页面中html标签解释后所展示的内容,但不会获取script和style标签中的内容
会获取将特殊字符和格式化字符( 等)渲染后的结果,
可以认为页面中的展示的文本是什么样子,innerText获取的就是什么样子。
在IE9以下中会受部分css样式影响,如浮动
3.textContent
textContent与innerText在使用时看似是最相似,但是他们有很多不同之处。
1.textContent 会获取所有元素的内容,包括 <script> 和 <style> 元素,并完全还原文本在html标签中的空格与换行,然而 innerText 不会。
2.innerText 受 CSS 样式的影响,并且不会返回隐藏元素的文本,而textContent会。
3.innerText 受 CSS 样式的影响,它会触发重排(reflow),但textContent 不会
4.在 IE (小于等于IE11的版本)中对 innerText 进行修改, 不仅会移除当前元素的子节点,而且还会永久性地破坏所有后代文本节点(所以不可能再次将节点再次插入到任何其他元素或同一元素中)
4.value
到这里大家应该对innerHTML、innerText和textContent解了,且上述的关系与行为操作均为非表单元素,下面我们将详细讲解表单元素中的value属性
注:textarea和input[type='text']的赋值操作与文本框内的写入操作属于同一操作
textarea:
FireFox:
innerHTML:通过innerHTML的赋值会影响textContent的取值,且再value赋值前会影响value取值,在value赋值后则value与innerHTML无关。
textContent:通过textContent的赋值会影响innerHTML的取值,且再value赋值前会影响value取值,在value赋值后则value与textContent无关。
value: 赋值后则生效
Chrome:
innerHTML、innerText、textContent再value赋值前进行赋值均会影响包含value的取值,在value赋值后则value与其无关
IE6-11:
innerHTML、innerText、textContent和value均可相互影响取值。
input[type='text']:
FireFox:
innerHTML:通过innerHTML的赋值会影响textContent的取值,且再value赋值前会影响value取值,在value赋值后则value与innerHTML无关。
textContent:通过textContent的赋值会影响innerHTML的取值,且再value赋值前会影响value取值,在value赋值后则value与textContent无关。
value: 赋值后则生效
Chrome:
innerHTML:innerHTML可被设置但无效,但会影响textContent的取值
textContent:textContent可被设置但无效,会始终影响value的取值
innerText:innerText可被设置且有效,不会影响其他方法的取值
value:value可被设置且有效,不会影响其他方法的取值
IE6~8:
innerHTML:设置时报错
textContent:textContent可被设置但无效,会始终影响value的取值
innerText:innerText可被设置但无效,会始终影响value的取值
value:value可被设置且有效,不会影响其他方法的取值
IE9~11:
innerHTML:innerHTML可被设置且有效,会影响textContent和innerText的取值
textContent:textContent可被设置但无效,会始终影响value的取值
innerText:innerText可被设置但无效,会始终影响value的取值
value:value可被设置且有效,不会影响其他方法的取值