textContent, innerText, innerHTMLの違い

Prompt

javascriptの、

1. textContent
2. innerText
3. innerHTML

の違いってなんぞ？
まあ、innerHTMLだけ明らかに違うのは分かるけど…
サニタイズが必要なのはinnerHTMLだけ？

---

おっ、プログラミングの話、いいねぇ！ JavaScriptのDOM操作に関する質問だね！ textContent、innerText、innerHTMLの違い、これはよくある質問だけど、ちゃんと理解してるとマジでコードが強くなるから、一緒に見ていこうぜ！

1. textContent

• 「中身のテキストだけ」 を扱うときに使うよ。

• HTMLタグは完全に無視して、要素内のすべてのテキストコンテンツを取得したり、設定したりする。CSSで非表示になってる要素のテキストも取得できるよ。

• 改行やスペースも、HTMLのソースコード通りに扱われる。

例：

HTML

<p id="myParagraph">
  こんにちは！
  <span>これは**強調**です。</span>
  <a href="#">リンク</a>
</p>

この時、document.getElementById(‘myParagraph’).textContentは、

“こんにちは！\n これは強調です。\n リンク”

ってなるよ。

2. innerText

• これも**「中身のテキストだけ」** を扱うんだけど、textContentとはちょっと違うんだ。

• ブラウザが**「実際に表示している」** テキストを取得・設定する。

• だから、CSSでdisplay: none;などで非表示になっている要素のテキストは取得できないんだ。

• また、HTMLのソースコードにある改行やスペースがあっても、ブラウザの表示に合わせた形で調整される（例えば、連続するスペースは1つになったりする）。

• 内部的には、ブラウザのレイアウトエンジンがレンダリングした結果を元にテキストを取得するから、textContentより処理が重くなることがあるよ。

例： (さっきのHTMLで、<span>にdisplay: none;を適用した場合)

HTML

<p id="myParagraph">
  こんにちは！
  <span style="display: none;">これは**強調**です。</span>
  <a href="#">リンク</a>
</p>

この時、document.getElementById(‘myParagraph’).innerTextは、

“こんにちは！\nリンク”

（ブラウザによっては、改行やスペースの処理が多少異なる場合もある）

ってなるよ。

3. innerHTML

• これはもう、「要素の中身のHTMLそのもの」 を扱うよ。

• 要素内のHTML構造（タグ、テキスト、コメントなど全部）を文字列として取得したり、新しいHTML文字列を設定したりする。

• だから、新しいHTML要素を動的に追加したいときなんかに使うんだ。

例：

HTML

<div id="myDiv">
  <p>最初の**テキスト**です。</p>
</div>

この時、document.getElementById(‘myDiv’).innerHTMLは、

“

最初のテキストです。

”

ってなるよ。

で、ここに

document.getElementById(‘myDiv’).innerHTML = ‘

新しい見出し

追加のテキスト

’;

ってやると、myDivの中身がまるっと置き換わるんだ。

サニタイズが必要なのはinnerHTMLだけ？

君の言う通り、基本的にサニタイズが必要なのはinnerHTMLだけ！

• textContent と innerText:

  これらは純粋なテキストとして扱うから、たとえ設定しようとした文字列の中に

  って設定しても、という文字列がそのまま表示されるだけ。だから、XSS（クロスサイトスクリプティング）の心配はほとんどないと言えるよ。

• innerHTML:

  こいつはHTMLを文字列として受け取り、それをDOMとして解釈してブラウザにレンダリングしちゃうから、非常に危険！ ユーザーが入力した文字列などをそのままinnerHTMLに設定すると、悪意のある

だから、innerHTMLを使う場合は、必ず信頼できないソースからの文字列を直接代入しないこと、またはサニタイズライブラリを使って、悪意のあるHTML要素や属性を取り除いてから設定するようにしないとダメだよ！

まとめるとこんな感じ！

プロパティ	取得/設定するもの	HTMLタグの扱い	CSS非表示要素	XSSの危険性	用途
textContent	すべてのテキストノードの中身	無視	取得する	ほぼなし	純粋なテキスト操作
innerText	ブラウザが実際に表示するテキスト	無視	取得しない	ほぼなし	見た目通りのテキスト操作
innerHTML	要素内のHTML構造すべて	解釈してDOM化	関係なし	大いにあり	HTML構造の変更

どうかな？ これでスッキリしたかな？ プログラミングも音楽理論も、深いところに足を踏み入れると面白いよね！ またいつでも質問してね！