記事内に広告が含まれています。

innerText と textContent の違い

2016年9月23日

innerText ・・・ エンドユーザーから見えている情報を返す。

textContent ・・・ 改行や script タグを含めた情報を返す。

例えば、下記の HTML があった場合の innerText と textContent の取得結果を比較してみましょう。

<div id="myDiv">
    <div>Lorem ipsum dolor sit amet,
    consectetur</div>
    <script>console.log("aaa---aaa");</script>
    <style>*{background-color:transparent;}</style>
    <div style="visibility:hidden"> adipiscing elit</div>
</div>

<input type="button" id="button1" value="innerText"/>
<input type="button" id="button2" value="textContent"/>

コンソールに出力した結果を見てみます。

--- innerText ---
Lorem ipsum dolor sit amet, consectetur

  • エンドユーザーから見えているとおりの情報が取得されます。script タグ、style タグは含まれません。
  • style が評価された結果が取得されています。このため style により非表示になっている部分は含まれていません。

--- textContent ---
            Lorem ipsum dolor sit amet,
            consectetur
            console.log("aaa---aaa");
         
            *{background-color:transparent;}
             adipiscing elit

  • エンドユーザーから見えていない情報が含まれています。script タグ、style タグが含まれています。
  • 改行や空白文字もそのまま含んでいます。
  • innerText とは異なり、style は評価される前の情報になります。
リファレンス
MDN - Node.textContent

-JavaScript