JavaScript

【JavaScript】DOMでテキストを取得・変更する方法3選

どうも、つよぽんです!

今回は、JavaScriptのDOMを使ってWebページ上のテキストを取得・変更する3つの方法を解説します。

今回紹介する3つの方法
  1. innerHTML」を使う
  2. innerText」を使う
  3. textContent」を使う

今回の記事は次のような方に向けて書きました。

想定読者
  • DOMの取得方法を覚えた後、次に何をすればよいかわからない方 (今回はテキスト操作の解説)
  • Webページのテキストを動的に変更する方法を知りたい方

この記事を読み終えた後のあなたは次のことがわかるようになっています。

この記事を読み終えた後のあなた
  • DOMを使ってテキスト操作を行えるようになる
  • innerHTML, innerText, textContentの挙動の違いを理解できるようになる

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事とあわせて読むことでより深く学習できます。

あわせて読みたい
【JavaScript】DOMのテキスト内容を取得・変更するJavaScriptでDOMのテキストを取得・変更する方法を学習します。テキストを変更する代表的な方法は次の3つ「①innerHTML」「 ②innerText」 「③textContent」があります。3つそれぞれの違いも解説します。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptのDOMを使ったテキスト操作その① : innerHTML
  2. JavaScriptのDOMを使ったテキスト操作その② : innerText
  3. JavaScriptのDOMを使ったテキスト操作その③ : textContent

JavaScriptのDOMを使ったテキスト操作その① : innerHTML

この章では「innerHTML」を使ったテキストの取得・操作方法を解説します。

innerHTMLの使い方は以下の画像で説明しているのでそちらを参考にして頂けたらと思います。

innerHTMLの使い方の説明innerHTMLの使い方の説明

上の画像の一番最初でHTMLから特定の要素のDOMの取得をしています。

DOMの取得方法に関しては別記事「JavaScriptでHTMLの要素(DOM)を取得する方法5選」で解説しているのでそちらを参考にして頂けたらと思います。

以下の画像の赤枠内では、HTMLから特定要素のDOMを取得して、innerHTMLを使ってテキストの取得とテキストの更新を行っている様子を表しています。(※画像をクリックすると別タブで画像が開きます)

innerHTMLを使ったサンプルコードの解説innerHTMLを使ったサンプルコードの解説

上の画像内のサンプルコードは以下のリンクから直接確認できます。

DOMのテキスト内容を書き換えるサンプル

画像内の説明でも書いていますが、innerHTMLを使ったテキストの取得・変更の挙動をまとめると次のようになります。

innerHTMLの挙動
  • テキスト取得時
    • 要素内に含まれているテキストを取得する
    • 要素内にHTML要素が含まれている場合はHTML要素も含めて取得する
  • テキスト更新時
    • 更新前のテキスト内容を上書きする
    • 更新後のテキストにHTML要素が含まれている場合は、その要素に応じた表示が反映される。(例: strong要素を使った場合はテキストが強調される)
  • 「DOMオブジェクト.innerHTML」でHTML要素が含まれていたら、HTML要素も含めて取得する
  • 「DOMオブジェクト.innerHTML = ‘<strong>更新後</strrong>の値’」でテキストを更新できる。
  • innerHTMLでテキスト変更時にHTML要素が含まれている場合、ブラウザはHTMLの要素だと解釈する。(例: 「<strong>更新後</strong>の値」というテキストがセットされると「更新後の値」のように「strong要素」で囲まれている部分は強調される)

JavaScriptのDOMを使ったテキスト操作その② : innerText

この章では「innerText」を使ったテキストの取得・操作方法を解説します。

innerTextの使い方は以下の画像で説明しているのでそちらを参考にして頂けたらと思います。

innerTextの使い方の説明innerTextの使い方の説明

以下の画像の赤枠内では、HTMLから特定要素のDOMを取得して、innerTextを使ってテキストの取得とテキストの更新を行っている様子を表しています。(※画像をクリックすると別タブで画像が開きます)

innerTextを使ったサンプルコードの解説innerTextを使ったサンプルコードの解説

上の画像内のサンプルコードは以下のリンクから直接確認できます。

DOMのテキスト内容を書き換えるサンプル

画像内の説明でも書いていますが、innerTextを使ったテキストの取得・変更の挙動をまとめると次のようになります。

innerTextの挙動
  • テキスト取得時
    • 要素内に含まれているテキストを取得する
    • 要素内にHTML要素が含まれている場合はHTML要素を含めないで取得する
  • テキスト更新時
    • 更新前のテキスト内容を上書きする
    • 更新後のテキストにHTML要素が含まれている場合は、そのままテキストとして表示される。(例: strong要素を使っても強調されるわけではなく、そのままテキストとしてWebページ上に表示される)
  • 「DOMオブジェクト.innerText」でHTML要素が含まれていたら、HTML要素も含めないでテキストを取得する
  • 「DOMオブジェクト.innerText = ‘<strong>更新後</strrong>の値’」でテキストを更新できる。
  • innerTextでテキスト変更時にHTML要素が含まれている場合、ブラウザはHTMLの要素だと解釈しないで、そのまま普通のテキストとしてページ上に表示される。(例: 「<strong>更新後</strong>の値」というテキストがセットされても、そのまま「<strong>更新後</strong>の値」というテキストが表示される)

JavaScriptのDOMを使ったテキスト操作その③ : textContent

この章では「textContent」を使ったテキストの取得・操作方法を解説します。

textContentの使い方は以下の画像で説明しているのでそちらを参考にして頂けたらと思います。

textContentの使い方の説明textContentの使い方の説明

以下の画像の赤枠内では、HTMLから特定要素のDOMを取得して、textContentを使ってテキストの取得とテキストの更新を行っている様子を表しています。(※画像をクリックすると別タブで画像が開きます)

textContentを使ったサンプルコードの解説textContentを使ったサンプルコードの解説

上の画像内のサンプルコードは以下のリンクから直接確認できます。

DOMのテキスト内容を書き換えるサンプル

画像内の説明でも書いていますが、「textContent」は1つ前の章で解説した「innerText」とほとんど同じ動きをします。

僕自身、「textContent」と「innerText」の違いをあまり意識せずに使っています。

それでも「textContentとinnerTextの違いを詳しく知りたい!」という方は、MDNの「Node.textContent > innerText との違い」が参考になるかと思います。

  • 基本的には「innerText」とほとんど同じ動きをする
  • より具体的に「textContent」と「innerText」の違いを詳しく知りたい場合は「innerText との違い」を参照

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • テキストの取得・変更をするには「innerHTML」「innerText」「textContent」を状況に応じて使い分けると良い
  • innerHTMLの挙動
    • 取得時 : テキストだけでなく要素内に含まれているHTML要素も含めて取得する
    • 更新時 : 更新後のテキストにHTML要素が含まれているHTML要素がブラウザに反映される(例 : strong要素を使っている場合はテキストが強調される)
  • innerText
    • 取得時 : テキストのみを取得する(要素内に含まれているHTML要素は無視する)
    • 更新時 : 更新後のテキストにHTML要素が含まれていてもHTML要素はブラウザに反映されず、そのままテキストとして表示される(例 : ページ上に「<strong>abc</strong>」と表示される)
  • textContent
    • 取得も更新も、基本的に「innerText」と挙動が似ている
    • 「innerText」との違いを詳しく知りたい場合は「Node.textContent > innerText との違い」を参考にすると良い

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
【JavaScript】DOMのテキスト内容を取得・変更するJavaScriptでDOMのテキストを取得・変更する方法を学習します。テキストを変更する代表的な方法は次の3つ「①innerHTML」「 ②innerText」 「③textContent」があります。3つそれぞれの違いも解説します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です