DOMの「テキスト・内容の取得」— innerText / textContent / innerHTML

DOM要素から何を・どういう規則で取り出すかによって、使うプロパティが変わります。代表的なのが innerText、textContent、innerHTML の3つです。ここではそれぞれの意味, 違い, 使いどころ, 注意点を体系的に整理します。

---

まず結論（比較表）

---

各プロパティの意味と特徴

innerText

• **「見た目どおりのテキスト」**を返します。
  CSSの影響（display, visibility, white-space など）を考慮し、非表示は除外、空白は人間が読む形に正規化、ブロック要素間で改行が入ることがあります。

• 値を読む際に**レイアウト計算（reflow）**が発生しやすく、要素数が多いとコスト増。

• 使いどころ：ユーザーに見えているテキストだけを収集したい（スクレイピング・ログ出力・可読テキスト抽出など）。

textContent

• DOMに存在するテキストノードの生テキストを返します。
  CSSは無視されるため、非表示要素の文字も含む一方、見た目の改行は追加しません。

• 高速で、単純にテキストが欲しい処理（検索、正規表現処理、エスケープ表示）に向きます。

• <script>/<style>の内容もテキストとして含まれる点に注意。

innerHTML

• 要素配下の**HTML（マークアップ）**を文字列で返します。
  タグ構造を持ったまま取得・貼り付け・テンプレート化に使えます。

• 読み取りだけなら安全ですが、書き込み時に外部入力をそのまま渡すのは危険（XSSにつながる）。ユーザー入力を挿入する場合は textContent 等でエスケープしましょう。

---

ミニサンプル（違いを一度に確認）

html
<div id="box">
  Title
  <p class="visible">Hello <strong>World</strong></p>
  <p class="hidden" style="display:none">Hidden Text</p>
  <script>var x = 1;</script>
</div>

js
const el = document.getElementById('box');

console.log('innerText   =>', el.innerText);
console.log('textContent =>', el.textContent);
console.log('innerHTML   =>', el.innerHTML);

• 期待される傾向

  • innerText

    • 画面に見える「Title」「Hello World」を改行等で読みやすく結合。

    • display:none の「Hidden Text」や <script> 内容は含まれない。

  • textContent

    • 「TitleHello WorldHidden Textvar x = 1;」のように、DOMにある文字を全部結合（空白・改行はソースのまま）。

    • <script> の「var x = 1;」も含まれる。

  • innerHTML

    • Title の前後の空白を含むHTML文字列。<p class="visible">Hello <strong>World</strong></p> のようにタグ込みで返る。

※ 正確な空白・改行はHTMLの書き方（インデントや改行位置）やブラウザ実装に依存します。

---

よくある用途と選び方

• 見えている文字列だけが欲しい（画面に準拠した抽出）
  → innerText

• 機械処理用の素のテキストが欲しい（検索、自然言語処理、差分など）
  → textContent

• 部分HTMLをテンプレートとして扱う／丸ごと差し替える
  → innerHTML（※書き込み時はXSS対策必須）

---

実践パターン

1) ユーザー入力を安全に表示する

js
const input = '<img src=x onerror=alert(1)>'; // 危険な例
const safe = document.getElementById('safe');
safe.textContent = input; // タグは無効化され文字として表示される

• 理由：textContent はエスケープ済み表示になるため安全。

2) 見えているテキストだけ集計する

js
const article = document.querySelector('article');
const visibleText = article.innerText; // 読了時間の推定などに

• 注意：大量DOMに対する innerText はレイアウト計算で重くなる。

3) HTMLフラグメントを複製・差し替えする

js
const tpl = document.getElementById('tpl');
const list = document.getElementById('list');
list.innerHTML = tpl.innerHTML; // 断片のコピーに便利（静的な自前HTMLに限る）

• 注意：未知の外部データを innerHTML に流し込まない。

---

細かな挙動のポイント

• 非表示要素

  • innerText は display:none や（多くのケースで）visibility:hidden のテキストを含めない。

  • textContent は含める（CSS無視）。

• 空白と改行

  • innerText は人間の見た目に寄せて空白を圧縮・改行を挿入。

  • textContent はDOMのテキストノードのまま。ブロック要素の間に自動で改行は入らない。

• 擬似要素の内容（content）

  • いずれも含まれない（DOM外の生成コンテンツ）。

• 要素の種類

  • innerText は主に HTMLElement に定義。

  • textContent は Node 全般に定義（Document, Text などでも可）。

  • innerHTML は Element/DocumentFragment で利用（Text にはない）。

• パフォーマンス

  • 大きなDOMで頻繁に読むならまず textContent を検討。
    可視テキストが必要なときだけ innerText を使うと安定する。

---

まとめ（選択ガイド）

• 可視テキストが欲しい → innerText

• 純テキストが欲しい／高速 → textContent

• HTML構造ごと取りたい → innerHTML

• 書き込み時の安全性：外部由来のデータは textContent で挿入。innerHTML に流し込むのは避ける。