textContent、innerText、innerHTMLの違いを完全比較！―初心者エンジニアのためのやさしい解説 コピー
山崎講師
こんにちは。ゆうせいです。
JavaScriptでHTML要素の「中身」を操作しようとすると、こんな3つのプロパティに出会いますよね。
element.textContent
element.innerText
element.innerHTML
どれも「中身を取得・変更する」ためのプロパティですが、実はそれぞれ挙動が全然違います！
「どれを使えばいいの？」「何が違うの？」と迷ってしまう新人エンジニアの方へ、これら3つの違いを図・表・実例を交えてわかりやすく解説します！
結論：それぞれの役割を一言で！
| プロパティ名 | 主な役割 | タグを含む？ | 見えない文字も含む？ |
|---|---|---|---|
innerHTML | HTML構造ごと取得・挿入 | 含む | 含む |
innerText | 見えている文字を取得 | 含まない | 含まない |
textContent | DOM内のすべてのテキスト | 含まない | 含む |
具体例で比べてみよう！
HTML構造
<div id="sample">
こんにちは <span style="display: none;">世界</span>！
</div>
JavaScriptで取得
const el = document.getElementById('sample');
console.log(el.innerHTML);
// → "こんにちは <span style="display: none;">世界</span>！"
console.log(el.innerText);
// → "こんにちは ！"（非表示の「世界」は含まれない）
console.log(el.textContent);
// → "こんにちは 世界！"（非表示でも含む）
特徴を図で比較！
HTML: <div>こんにちは <span style="display:none;">世界</span>！</div>
[innerHTML] → タグごと取得 → "こんにちは <span>世界</span>！"
[innerText] → 表示文字だけ → "こんにちは ！"
[textContent] → テキストすべて → "こんにちは 世界！"
それぞれの用途と使い方
innerHTML
✅ タグごと含めてHTML構造を取得・挿入したいとき
el.innerHTML = '<strong>重要</strong>';
⚠ XSS（クロスサイトスクリプティング） のリスクがあるため、外部から取得したデータには使わないのが原則です。
innerText
✅ ユーザーに「画面上で表示されているテキストだけ」を取得したいとき
console.log(button.innerText); // 実際に見えているボタンのラベル
⚠ ブラウザによっては、描画（レンダリング）完了後でないと取得値が違うこともあるため、やや環境依存あり。
textContent
✅ DOMツリー上にある「すべてのテキスト」を機械的に取得したいとき
console.log(element.textContent); // 非表示のテキストも含まれる
✅ パフォーマンスもよく、HTMLタグを無視して純粋な文字列だけを処理したいときに最適！
3つの違いまとめ表
| 観点 | innerHTML | innerText | textContent |
|---|---|---|---|
| タグを含むか | 含む | 含まない | 含まない |
| 表示されていない要素の文字 | 含む | 含まない | 含む |
| HTMLを挿入できる | ◎ | × | × |
| HTMLエスケープの必要性 | 必要（XSS対策） | 不要 | 不要 |
| パフォーマンス | △ | △ | ◎ |
| 安全性（外部入力） | 低 | 高 | 高 |
迷ったときの選び方
- HTML構造を操作したいとき →
innerHTML - ユーザーが画面で見ている文字だけほしいとき →
innerText - テキストだけをシンプルに扱いたいとき →
textContent
今後の学習の道しるべ
次は以下の内容を学んでみてください！
- XSSのリスクと回避方法（
innerHTMLの危険性） - textContentとinnerTextのレンダリング差異
- DOM操作とセキュリティのベストプラクティス
- アクセシビリティと「見えるテキスト」の取り扱い
それぞれの違いを理解すると、より安全に・効率的にDOMを扱う力がつきます。
ぜひ、自分でも使い比べて感覚で覚えてみてくださいね！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール