textContent、innerText、innerHTMLの違いを理解しよう(2020年版)

ウェブページ上での文字列の操作は、 프로그ラマーやデベロッパーにとって必須のスキルです。その中で、textContent、innerText、innerHTMLという3つのプロパティーが頻繁に登場します。しかし、これらのプロパティーの使い分けは経験則に頼っている場合が多く、実際の挙動に違いがあることを把握できていません。本稿では、これらのプロパティーの違いを明確に説明し、実際の例や最新のブラウザーの動向を踏まえて、2020年のウェブ開発現場でこれらのプロパティーを効果的に扱うためのノウハウを提供します。

テキスト関連プロパティーの異なる Points を理解する

textContent、innerText、innerHTML は、HTML 要素のテキスト コンテンツを取り扱うためのプロパティーですが、各々異なる点があります。本稿では、これらのプロパティーの異なる点を詳しく説明します。

textContent

textContent プロパティーは、ノード内の全てのテキスト コンテンツを返します。このプロパティーは、CSS やスクリプトによって隠された要素や、visible 属性が false に設定されている要素も含みます。例えば、次の HTML コードの場合、textContent プロパティーは「Hello World!」というテキストを返します。

innerText

innerText プロパティーは、要素内の VISIBLE なテキスト コンテンツを返します。このプロパティーは、CSS やスクリプトによって隠された要素は含みません。例えば、次の HTML コードの場合、innerText プロパティーは「World!」というテキストを返します。

innerHTML

innerHTML プロパティーは、要素内の HTML マークアップを含むテキスト コンテンツを返します。このプロパティーは、CSS やスクリプトによって隠された要素も含みます。例えば、次の HTML コードの場合、innerHTML プロパティーは「

」というテキストを返します。

性能の違い

textContent、innerText、innerHTML の各々の性能は異なります。textContent は最も高速で、innerText は中程度、innerHTML は最も低速です。这は、textContent が単にテキスト ノードを返すのに対し、innerText はVISIBLE な要素を検索し、innerHTML は HTML マークアップのパースが必要なためです。

使用シーンの違い

textContent、innerText、innerHTML の各々の使用シーンは異なります。textContent は、テキストの取得や設定に使用するべきであり、innerText は、VISIBLE なテキストの取得に使用するべきであり、innerHTML は、HTML マークアップの取得や設定に使用するべきです。

よくある質問

textContent、innerText、innerHTMLの3つは何のために使われますか?

textContent、innerText、innerHTMLの3つは、HTMLエレメントのコンテンツを取得あるいは変更するために使用されるプロパティです。これらのプロパティは、Webページ上の要素のコンテンツを取得、変更、操作するために使用されます。例えば、textContentは、エレメントのテキストコンテンツを取得するために使用され、innerTextは、エレメントのテキストコンテンツを取得する際にスタイルやレイアウト情報を考慮に入れるために使用されます。一方、innerHTMLは、エレメントのHTMLコンテンツを取得、変更するために使用されます。

textContentとinnerTextの違いは何ですか?

textContentとinnerTextの最大の違いは、スタイルやレイアウト情報の扱いの違いです。textContentは、エレメントのテキストコンテンツをそのまま取得します。一方、innerTextは、エレメントのテキストコンテンツを取得する際にスタイルやレイアウト情報を考慮に入れるため、表示されるテキストコンテンツと異なる結果が返される場合があります。

innerHTMLはセキュリティーリスクではないのですか?

innerHTMLは、HTMLコンテンツを直接セットできるため、セキュリティーリスクがあります。 Renderされる HTML コンテンツが適切にエスケープされていない場合、 악意のあるスクリプトが実行される可能性があります。これを避けるためには、innerHTMLに設定するコンテンツを適切にエスケープする必要があります。

どのプロパティを使用するべきですか?

プロジェクトの要件や目的によって、適切なプロパティを選択する必要があります。textContentは、純粋なテキストコンテンツを取得するために使用されることが多く、innerTextは、スタイルやレイアウト情報を考慮に入れたテキストコンテンツを取得するために使用されることが多く、innerHTMLは、HTMLコンテンツを取得、変更するために使用されることが多きます。ただし、innerHTMLはセキュリティーリスクがあるため、適切に使用する必要があります。

レン、「技術分野における最高のガイド」の創設者です。

私は職業としてのエンジニアではありませんが、情熱としてのエンジニアです。技術分野における最高のガイドを立ち上げたのは、デジタル世界のあらゆる知識やリソースを紹介するためです。すべてをよりシンプルで理解しやすい視点から誰にでも伝えられるよう心がけています。