Zenn
👻

textContent、innerText、innerHTML の違いとは

2022/03/04に公開
HTML
JavaScript
初心者
プログラミング
フロントエンド
tech

皆さんこんにちは！

今回は、私がJavaScriptを書いていく中でよく分かってないまま使っていた謎のひとつについて書いていこうかと思います。

謎のひとつ、なので現状他にもいっぱいある模様（当社調べ）

さて、今回のその謎とは、

\textcolor{Turquoise}{　textContent、innerText、innerHTML　}

の違いとは・・・？(꒪ཫ꒪; )

です。w

このまま分からないまま使い続けるわけにもいかない！
ということで違いを調べてみました。

私は何者か

プロフィール

ITの勉強を始めて１年弱。
オーストラリア在住。現在General AssemblyのSEIコース受講中。
2022年9月ごろから転職活動予定。
趣味はピアノ。
ゆえに特技はキーボードを打つ時に指を異常な角度で打てること（え）

textContentとは？

textContent
  • \textcolor{SkyBlue}{選択した要素}、また\textcolor{SkyBlue}{その全ての子要素のテキスト}を扱う
  • 単にJSでひとつのelementに対して表示したいテキストを操作したい場合はこれが一般的？

innerTextとは？

innerText
  • \textcolor{DeepSkyBlue}{選択した要素}、また \textcolor{DeepSkyBlue}{その全ての子要素のテキスト}を扱う
  • だが、\textcolor{DeepSkyBlue}{非表示の要素は返さない}！！
  • \nで改行ができる

innerHTMLとは？

innerHTML
  • \textcolor{RoyalBlue}{要素に含まれるすべてのテキスト（html タグも含む）}を扱う

比較してみよう

  <div id="text-area">
    <h1>TEXTs</h1>
    <p id="text1">text1です</p>
    <p id="text2" style="display:none">text2です</p>
    <p id="text3">text3\nです</p>
  </div>

// divに対して各処理をしてみる

1 document.getElementById('text-area').textContent
2 document.getElementById('text-area').innerText
3 document.getElementById('text-area').innerHTML

結果

textContent

TEXTs
text1です
text2です
text3\nです


\textcolor{SkyBlue}{div内の全要素のテキスト全て}が表示された

innerText

TEXTs
text1です
text3\nです


div内のテキストに焦点が当てられているものの、\textcolor{DeepSkyBlue}{"display:none"であるtext2は返されていない}

innerHTML

<h1>TEXTs</h1>
<p id="text1">text1です</p>
<p id="text2" style="display:none">text2です</p>
<p id="text3">text3\nです</p>


div内の\textcolor{RoyalBlue}{全要素がタグごと}返されている




改行(\n)はどうなるか？

ではコードをこうしてみましょう。

<div>
  <p id="text4"></p>
  <p id="text5"></p>
  <p id="text6"></p>
</div>

1 document.getElementById('text4').textContent = 'textContent\nです'
2 document.getElementById('text5').innerText = 'innerText\nです'
3 document.getElementById('text6').innerHTML = 'innerHTML\nです'

結果


\textcolor{DeepSkyBlue}{innerText}のみ改行されましたね！



補足

試しにこうしてみると・・・

1 typeof document.getElementById('text-area').innerHTML
2 typeof document.getElementById('text-area')

となります(`·⊝·´)

Discussion