呼伦贝尔网站建设公司,互联网营销行业,友谊路街道网站建设,做分销网站多少钱当我们想要取出一段页面中的文本的时候#xff0c;有时在使用innerHTML#xff0c;innerText#xff0c;textContent和value中的任何一个方法取出的值是一样的#xff0c;这时会给使用者一种错觉#xff0c;他们的作用是一样的#xff0c;但是这是真的吗#xff1f;
那…当我们想要取出一段页面中的文本的时候有时在使用innerHTMLinnerTexttextContent和value中的任何一个方法取出的值是一样的这时会给使用者一种错觉他们的作用是一样的但是这是真的吗
那么接下来我们来了解下innerHTMLinnerTexttextContent和value分别是什么
1.innerHTML
首先来看MDN的解释Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。
innerHTML会获取页面中html标签起始至标签结束中间的所有内容包括后代元素的html标签与其中的内容
对自结尾的html标签和伪元素中无效(例img/)。并会将 , , 转义为 amp;, lt; 和 gt通过innerHTML进行赋值会清空所选标签内的所有内容后在进行赋值此时若我们要取当前div中的值因为会导致特殊文本的转义这时候用innerHTML就不是很合适了。
2.innerText
innerText最早是由IE引入的并于2016年正式成为了HTML的标准
innerText会获取页面中html标签解释后所展示的内容但不会获取script和style标签中的内容
会获取将特殊字符和格式化字符(nbsp;等)渲染后的结果
可以认为页面中的展示的文本是什么样子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[typetext]的赋值操作与文本框内的写入操作属于同一操作textareaFireFoxinnerHTML通过innerHTML的赋值会影响textContent的取值且再value赋值前会影响value取值在value赋值后则value与innerHTML无关。textContent通过textContent的赋值会影响innerHTML的取值且再value赋值前会影响value取值在value赋值后则value与textContent无关。value: 赋值后则生效ChromeinnerHTML、innerText、textContent再value赋值前进行赋值均会影响包含value的取值在value赋值后则value与其无关IE6-11innerHTML、innerText、textContent和value均可相互影响取值。input[typetext]FireFoxinnerHTML通过innerHTML的赋值会影响textContent的取值且再value赋值前会影响value取值在value赋值后则value与innerHTML无关。textContent通过textContent的赋值会影响innerHTML的取值且再value赋值前会影响value取值在value赋值后则value与textContent无关。value: 赋值后则生效Chrome:innerHTMLinnerHTML可被设置但无效但会影响textContent的取值textContenttextContent可被设置但无效会始终影响value的取值innerTextinnerText可被设置且有效不会影响其他方法的取值valuevalue可被设置且有效不会影响其他方法的取值IE6~8innerHTML设置时报错textContenttextContent可被设置但无效会始终影响value的取值innerTextinnerText可被设置但无效会始终影响value的取值valuevalue可被设置且有效不会影响其他方法的取值IE9~11innerHTMLinnerHTML可被设置且有效会影响textContent和innerText的取值textContenttextContent可被设置但无效会始终影响value的取值innerTextinnerText可被设置但无效会始终影响value的取值valuevalue可被设置且有效不会影响其他方法的取值
