JavaScriptを使ってHTMLの要素を操作する際、テキストやHTMLコードの取得・変更によく使われるプロパティとして、innerText、textContent、innerHTML、outerHTMLがあります。
これらのプロパティを適切に使い分けることで、より効率的にDOM操作を行うことができます。本記事では、それぞれの違いと使い方について詳しく解説します。
innerText：可視テキストの取得と変更
innerTextとは？
innerTextプロパティは、要素内の「実際に表示されているテキスト」を取得または変更するためのプロパティです。
特徴:
- HTMLタグを無視し、テキストのみを取得・変更する。
- CSSで非表示になっている要素（
display: none;など）は取得しない。
例1：要素のテキストを取得
<p id="example">こんにちは、<span style="display:none;">隠れたテキスト</span>JavaScript！</p>
<button onclick="getText()">テキストを取得</button>
<script>
function getText() {
const text = document.getElementById("example").innerText;
alert(text); // 「こんにちは、JavaScript！」（隠れたテキストは取得されない）
}
</script>
例2：要素のテキストを変更
<p id="example">元のテキスト</p>
<button onclick="changeText()">テキスト変更</button>
<script>
function changeText() {
document.getElementById("example").innerText = "新しいテキスト！";
}
</script>textContent：HTMLタグを含めずテキストを取得・変更
textContentとは？
textContentは、要素内のすべてのテキストを取得・変更するためのプロパティです。
特徴:
- HTMLタグを無視してすべてのテキストを取得する（
innerTextと同様）。 - CSSで非表示の要素も取得できる（
innerTextとの違い）。 - 処理が速い（
innerTextよりパフォーマンスが良い）。
例3：非表示のテキストも取得
<p id="example">こんにちは、<span style="display:none;">隠れたテキスト</span>JavaScript！</p>
<button onclick="getTextContent()">textContentの取得</button>
<script>
function getTextContent() {
const text = document.getElementById("example").textContent;
alert(text); // 「こんにちは、隠れたテキストJavaScript！」（非表示のテキストも取得）
}
</script>innerHTML：HTMLを含めた内容を取得・変更
innerHTMLとは？
innerHTMLは、要素内のHTMLコードを含めた内容を取得・変更するプロパティです。
特徴:
- タグ付きのHTMLを取得・変更できる。
- 外部からのHTMLの挿入も可能（ただし、セキュリティリスクあり）。
例4：HTMLを取得
<div id="example"><strong>強調されたテキスト</strong></div>
<button onclick="getHTML()">HTMLを取得</button>
<script>
function getHTML() {
const html = document.getElementById("example").innerHTML;
alert(html); // 「<strong>強調されたテキスト</strong>」
}
</script>例5：HTMLを変更
<div id="example">変更前の内容</div>
<button onclick="changeHTML()">HTMLを変更</button>
<script>
function changeHTML() {
document.getElementById("example").innerHTML = "<em>新しい内容</em>";
}
</script>このコードを実行すると、<div>の内容が<em>タグで囲まれた新しい内容に変更されます。
⚠ 注意点
innerHTMLを使って外部からのデータを挿入すると、XSS（クロスサイトスクリプティング）攻撃のリスクがあります。- ユーザー入力を直接
innerHTMLに設定するのは避けるべきです。
outerHTML：要素自体を含めて変更する
outerHTMLとは？
outerHTMLは、innerHTMLと似ていますが、要素自身を含めたHTML全体を取得・変更できるプロパティです。
特徴:
- 要素自身も含めて書き換えられる。
- 使い方によっては要素が削除されることもある。
例6：outerHTMLで要素自体を変更
<p id="example">この要素を変更します。</p>
<button onclick="changeOuterHTML()">outerHTMLを変更</button>
<script>
function changeOuterHTML() {
document.getElementById("example").outerHTML = "<h2>要素ごと変更！</h2>";
}
</script>このコードを実行すると、<p>タグが<h2>タグに完全に置き換えられます。
どれを使うべきか？ 使い分けガイド
| プロパティ | HTMLタグを取得 | 非表示の要素を取得 | 変更時にタグを含める | 用途の例 |
|---|---|---|---|---|
innerText | ❌ 取得しない | ❌ 取得しない | ❌ タグなし | 見えているテキストを取得・変更する |
textContent | ❌ 取得しない | ✅ 取得する | ❌ タグなし | すべてのテキストを取得・変更する |
innerHTML | ✅ 取得する | ✅ 取得する | ✅ タグ含む | HTMLを取得・変更する（安全性に注意） |
outerHTML | ✅ 取得する | ✅ 取得する | ✅ 要素ごと変更 | 要素自体を変更・置き換える |
まとめ
JavaScriptでHTML要素のテキストやHTMLコードを操作する場合、目的に応じて適切なプロパティを選ぶことが重要です。
- テキストのみを扱う場合 →
innerText（表示中のテキスト）またはtextContent（すべてのテキスト） - HTMLコードも扱いたい場合 →
innerHTML（要素の中身のみ）またはouterHTML（要素ごと）
特に、innerHTMLを使う際は、セキュリティリスク（XSS攻撃など）に注意が必要です。
コメント