頭脳一式 
display:noneがある場合
以下のHTMLを使って違いを検証していきます。
HTML
<div id="divA">This is <span style="display:none">some</span> text!</div>
innerHTMLの場合
innerHTMLの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').innerHTML);
実行結果
This is <span style="display:none">some</span> text!
解説
innerHTMLは要素を返します。なのでspan要素などもそのまま取得します。
textContentの場合
textContentの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').textContent);
実行結果
This is some text!
解説
textContentはテキストの内容を取得します。
innerTextの場合
innerTextの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').innerText);
実行結果
This is text!
解説
innerTextはテキストの内容を取得します。
textContentとの違いは、innerTextはユーザが読めるテキストのみを取得する点です。
つまり、innerTextはユーザがブラウザで見ているのと同じ状態で取得できると言えます。
改行brがある場合
以下のHTMLを使って違いを検証していきます。
HTML
<div id="divA"><p>あいうえお<br>かきくけこ<br>さしすせそ</p></div>
innerHTMLの場合
innerHTMLの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').innerHTML);
実行結果
<p>あいうえお<br>かきくけこ<br>さしすせそ</p>
解説
innerHTMLは要素を返します。なのでbr要素などもそのまま取得します。
textContentの場合
textContentの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').textContent);
実行結果
あいうえおかきくけこさしすせそ
解説
textContentはテキストの改行を無視して取得します。
innerTextの場合
innerTextの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').innerText);
実行結果
あいうえお
かきくけこ
さしすせそ
解説
innerTextは改行された状態でテキストを取得します。
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！
