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)