innerText和textContent

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

语法

  • 设置

    1

    element.textContent = “text”;

  • 获取

    1

    var text = element.textContent;

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

1
2

<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)