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
