参考理解
https://www.e-learn.cn/content/html/1765240
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML
Element.innerHTML
属性设置或获取HTML语法表示的元素的后代。
如果一个 <div>
, <span>
, 或 <noembed>
节点有一个文本子节点,该节点包含字符 (&),
(<),
或(>)
, innerHTML
将这些字符分别返回为&, < 和 > ,使用Node.textContent
可获取一个这些文本节点内容的正确副本。
innerHTML会获取页面中html标签起始至标签结束中间的所有内容包括后代元素的html标签与其中的内容
通过innerHTML进行赋值会清空所选标签内的所有内容后在进行赋值,innerText与textContent均如此
正如其名称,innerHTML 返回 HTML 文本。通常,为了在元素中检索或写入文本,人们使用innerHTML。但是,textContent通常具有更好的性能,因为文本不会被解析为HTML。此外,使用textContent可以防止 XSS 攻击。
用 innerHTML 插入文本到网页中并不罕见。但这有可能成为网站攻击的媒介,从而产生潜在的安全风险问题。 const name = "John"; // assuming 'el' is an HTML DOM element el.innerHTML = name; // harmless in this case // ... name = "<script>alert('I am John in an annoying alert!')</script>"; el.innerHTML = name; // harmless in this case 尽管这看上去像 cross-site scripting 攻击,结果并不会导致什么。HTML 5 中指定不执行由 innerHTML 插入的 <script> 标签。 然而,有很多不依赖 <script> 标签去执行 JavaScript 的方式。所以当你使用innerHTML 去设置你无法控制的字符串时,这仍然是一个安全问题。例如: const name = "<img src='x' onerror='alert(1)'>"; el.innerHTML = name; // shows the alert 基于这个原因,当插入纯文本时,建议不要使用 innerHTML 。取而代之的是使用 Node.textContent ,它不会把给定的内容解析为 HTML,它仅仅是将原始文本插入给定的位置。
textContent会获取所有元素的content,包括`<script>`和`<style>`,'<title>'元素内容,innerText不会获取`<script>`和`<style>`<title>元素内容
innerText最早是由IE引入的,并于2016年正式成为了HTML的标准,innerText 对IE的兼容性较好 ,textContent虽然作为标准方法但是只支持IE8+以上的浏览器 ,最新的浏览器,两个都可以使用,在 IE (小于等于IE11的版本)中对 innerText 进行修改, 不仅会移除当前元素的子节点,而且还会永久性地破坏所有后代文本节点(所以不可能再次将节点再次插入到任何其他元素或同一元素中)
innerText受 CSS 样式的影响,会引起reflow,textContent不会
innerText返回值会被格式化,每个元素内容独占一行,而textContent不会,源码是什么样子,提取的内容就是如何,可以理解为innerText根据页面可见元素内容提取元素内容,textContent根据源代码可见的元素内容提取以上内容
•innerText不会获取hidden元素的content,而textContent不会
归属区别
- textContent 是 Node 对象的属性;
- innerHTML 是 Element 对象的属性;
- innerText 是 HTMLElement 对象的属性;
火狐不支持innerText,需要使用textContent,兼容代码案例
FireFox不支持InnerText的解决方法 <table> <tr> <td onclick="getDetail(this)">zhangtongzct</td> </tr> </table> 通过点击table中td,获取td中的值,在一般浏览器,ie,360,谷歌中都支持innerText,但是火狐支持innText 火狐中要用textContent,所以代码我们应该这样写 function getDetail(obj){ var str= obj.innerText; if( str == null ) str = obj.textContent ; // 兼容火狐 return str; }