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