innerText与textContent的异同

转载自BetaRabbit的博文

今天在使用innerText时遇到一个兼容性问题,FireFox不支持innerText方法(新版本的已经支持),查了下MDN,发现FireFox下有个类似的方法,叫textContent,它和IE的innerText类似, 都是用来获取(设置)元素中text的方法。

语法

  • 设置

      element.textContent = “text”;

  • 获取

      var text = element.textContent;

     Note: textContent和innerText类似,也会同时获取子元素的text content,比如

     <div>this is <span>a</span> text!</div>
   // div.textContent == "this is a text!"

与innerText的区别

  • textContent会获取所有元素的content,包括`<script>`和`<style>`元素
  • innerText不会获取hidden元素的content,而textContent会
  • innerText会触发reflow,而textContent不会
  • innerText返回值会被格式化,而textContent不会

主流浏览器支持情况

  • IE 9+
  • Chrome 1+
  • FireFox(Gecko)
posted @ 2018-02-04 12:03  最帅人间体乡秀树  阅读(1115)  评论(0编辑  收藏  举报