innerText と textContent の違い

📋 目次（クリックで展開）
  • 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
https://developer.mozilla.org/ja/docs/Web/API/Node/textContent

💬 コメント