JavaScriptのtextContents、innerText、innerHTML: 違い

こんにちは！ 株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「textContents、innerText、innerHTML: 違い」についてお伝えしていきます。

textContentの取得と更新

HTML要素内のテキストコンテンツを取得と更新するためのプロパティとして、textContentは便利です。

このプロパティは、HTML要素内のすべてのテキストを含み、HTML要素自体のタグは無視されます。

使用例:

const element = document.getElementById('myElement');
const text = element.textContent; // テキストを取得
element.textContent = '新しいテキスト'; // テキストを更新

適切な使用法:

• テキストコンテンツを取得か更新する場合。
• 特にHTMLタグは無視してテキストのみが必要な場合。

innerTextの表示されているテキストの取得

innerTextは、指定された要素内の表示されているテキストコンテンツを取得するプロパティです。

表示されているテキストは、非表示の要素やCSSによって非表示にされたテキストを含みません。

このプロパティは、ユーザーが実際に見ることができるテキスト情報のみを取得したい場合に使用します。

使用例:

const element = document.getElementById('myElement');
const visibleText = element.innerText; // 表示されているテキストを取得

適切な使用法:

• 表示されているテキスト情報のみを取得または更新する場合。
• CSSによるスタイルの影響を受けないテキスト情報が必要な場合。

innerHTML: HTMLコンテンツの取得と更新

innerHTMLは、指定された要素内のHTMLコンテンツを取得と更新するプロパティです。

このプロパティは、HTML要素内のすべてのタグとテキストを含み、HTML要素自体も含まれます。

HTMLコンテンツ全体が取得または更新されます。

使用例:

const element = document.getElementById('myElement');
const htmlContent = element.innerHTML; // HTMLコンテンツを取得
element.innerHTML = '<p>新しいパラグラフ</p>'; // HTMLコンテンツを更新

適切な使用法:

• HTMLコンテンツ全体（タグを含む）を取得または更新する場合。
• 特に要素内のHTMLを動的に変更したい場合。

注意事項:

• innerHTMLはHTMLエンティティ（例: &、<、>）をHTML形式で取得または設定しますが、innerTextはテキストとして設定します。
• textContentはテキストを取得し、HTML要素は無視します。

これらの違いを理解し、適切なプロパティを選択することで、JavaScriptでHTML要素のコンテンツを効果的に操作できるようになります。