Skip to content

innerText の注意点と、textContent のススメ

Node インターフェイスのプロパティ、Node.innerText と Node.textContent の違いについて検証します。

どちらも要素のテキスト部分を取得、更新するためのプロパティですが、細かい挙動が異なるため注意が必要です。

どのような違いがあるか

2つのプロパティの違いについて、MDN から引用します。

textContent の特徴

https://developer.mozilla.org/ja/docs/Web/API/Node/textContent

  • 画面上に表示されていないテキストも取得する
  • ブラウザごとの挙動の差異が小さい

innerText の特徴

https://developer.mozilla.org/ja/docs/Web/API/Node/innerText

  • 画面上に表示されているテキストのみを取得する
  • ブラウザごとの挙動の差異が大きい

注意すべき点

これらのプロパティを使い分けるうえで最も注意すべき点は、innerText はページに表示されていないテキストを取得できないという点です。

MDN には、innerText について次のような記述があります。

As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied to the clipboard.

innerText は、ドラッグで選択してクリップボードにコピーしたときに取得できるものに近いテキストを取得できる、とあります。

innerText is aware of style and will not return the text of hidden elements, whereas textContent will.

innerText は style を認識し、非表示の要素のテキストを取得しない、とあります。

検証・サンプル

両プロパティの取得、上書きの挙動を確認するソースを作成し、IE11, Edge, Firefox, Chrome で動作を確認しました。

検証に使った html, css, js を載せておきます。

textContent を取得する

textContent は、空白文字を含むテキストが取得できます。

結果は以下の通りでした。

ブラウザごとの差異は見られませんでした。

innerText を取得する

innerText は、空白文字を含むテキストが取得できます。

結果は以下の通りでした。

innerText で取得できるテキストは、css の指定やブラウザによる差異が大きく見られました。今回作ったサンプルでは、全てのパターンでブラウザ間の差異が存在していました。

textContent を上書きする

textContent に値を代入すると、要素の中身を上書きすることができます。

結果は以下の通りでした。

ブラウザごとの差異は見られませんでした。

<textarea> の中身を上書きする場合、テキストエリアがユーザーによって操作されていなければ入力欄の中身を書き換えることができるようでした。もちろん実際は textContent ではなく value を使うべきでしょう。

innerText を上書きする

innerText に値を代入すると、要素の中身を上書きすることができます。

結果は以下の通りでした。

今回作成したサンプルを見る限りでは、textContent と同じ挙動となっていました。

どっちを使うべきか

ブラウザごとの差異が小さい textContent を使うべきでしょう。ただし、空白文字も含めて取得される点には注意が必要です。

ちなみに jQuery のソースでも、innerText ではなく textContent が使われているようでした。

Comments are closed.