innerText 和 textContent 的區別?

小皮草發表於2018-12-06

有兩個問題可以初步理解二者的區別:

  • 結點原生的文字內容是什麼?(What is the raw textual content inside of these Nodes?)
  • 展示給使用者的文字是什麼?(What is the text being presented to the user?)

textContet 表示前者,innerText 表示後者。

1. innerText 不能取到沒有渲染在頁面上的文字

<div id="t">
  <div>
    lions, tigers<div style="visibility: hidden"> and bears</div>
  </div>
</div>
複製程式碼

從上面這段 HTML 中取值可以理解這種區別。

  • innerText"lions, tigers"
  • textContent"lions,\ntigers and bears"

innerText 更像是直接從渲染的頁面上拷貝的值,而 textContent 是結點在程式碼中的值。

innerText is that it is roughly what you would get if you selected the text and copied.

textContent is just a concatenation of the values of all TextNodes in the sub-tree.

2. innerText 會帶來效能影響

由於 innerText 的值依賴渲染之後的結果,會收到 CSS 樣式的影響,因此它會觸發重排(reflow),所以使用它會有一定的效能影響;而 textContent 不會

因此更建議使用 textContent。

3. innerText 不是標準制定出來的 api

innerText 是 IE 引入的,在 IE 那個時代被廣泛使用起來的。

參考

  1. 《INNERTEXT VS. TEXTCONTENT》

相關文章