2026.01.26

【JavaScript】テキストの取得をしてみよう（innerHTML/textContent）

takahide

おはようございます。タカヒデです。

本日は、「JavaScriptにおける、『テキストの取得』について、『innerHTMLプロパティ』『textContentプロパティ』」を紹介します。

こんな人にオススメ

ここでは2つの方法を紹介します。

ぜひ本記事を参考にしてください。

Contents

テキストの取得方法①（innerHTMLプロパティ）

早速ですが、要素内のテキストを取得するには「innerHTMLプロパティ」を使用します。

記載方法に移る前に、この「テキストの取得」ってどのようなときに使うのかを考えてみましょう。
結構どこでも使っていそうですが、いざ具体的な活用イメージとなると難しいですね。

例えば、こんなことで使うみたいです。

特に1つ目のエラーメッセージ表示なんかはかなりイメージもつきやすいですね。

話を戻します。
記載方法を見ていきましょう。

//記載方法

要素.innerHTML

//記載方法

要素.innerHTML

シンプルですね。

では実際の記載例を見ていきます。
ここではHTMLに記載された『test』クラスのテキストを取得します。

<div class="test">
  <p>テストメッセージ</p>
</div>

<div class="test">
  <p>テストメッセージ</p>
</div>

let test = document.querySelector(".test")
console.log(test.innerHTML);
//実行結果：<p>テストメッセージ</p>

let test = document.querySelector(".test")
console.log(test.innerHTML);
//実行結果：<p>テストメッセージ</p>

見てわかるように、『<p>テストメッセージ</p>』という形でタグごとテキストを取得しています。

後ほど紹介しますが、「innerHTMLプロパティ」は「HTML構造を再利用したいとき」だけ限定的に使われるものなので、利用用途は限られるようです。

続いての方法として「textContentプロパティ」を使用します。

テキストを取得する場合は、こちらの「textContentプロパティ」が多くの場合に使われるようです。

こちらも記載方法を見ていきます。
ですが、記載方法としては「innerHTMLプロパティ」と基本的には変わりません。

//記載方法

要素.textContent

//記載方法

要素.textContent

使い方は全く同じですね。

同じように記載例を見ていきます。
ここでもHTMLに記載された『test』クラスのテキストを取得します。

<div class="test">
  <p>テストメッセージ</p>
</div>

<div class="test">
  <p>テストメッセージ</p>
</div>

let test = document.querySelector(".test")
console.log(test.textContent);
//実行結果：テストメッセージ

let test = document.querySelector(".test")
console.log(test.textContent);
//実行結果：テストメッセージ

やっている処理は全く同じですが、『テストメッセージ』という形でテキストのみを取得しています。

これが、「innerHTMLプロパティ」と「textContentプロパティ」のようですね。

ここまで、テキストの取得方法として『innerHTMLプロパティ』『textContentプロパティ』を紹介しました。

では実際に活用するとき、どちらを使っていけばよいのでしょうか？

それぞれの違いを以下の表に記載します。
（まあ先ほど「textContentプロパティ」が多くの場合に使われるとお伝えしたんですけどね。）