スポンサーリンク

【JavaScript】innerHTML,value,textContetの違いについて

みなさんこんにちは!
のむ(@nomu_engineer)です!

今回の記事では、タイトルにもある通り、innerHTMLとvalueとtextCotentの違いについて紹介していきます。

この3個のメソッドは、HTML要素の中身を取得したり、変更したりするという類似のメソッドです。

でもこまかくみると、違う部分もありますし、シチュエーション次第では使えるメソッドと使えないメソッドがあるので、今回の記事ではそういった細かい違いを説明していきます。

この記事を読むメリット
・innerHTMLとvalueとtextContentの違いを知れる

この記事を読むおすすめの読者
・プログラミング初心者
・駆け出しエンジニア
・JavaScript初心者

それでは早速本題に入っていきたいと思います!

value

form部品については、基本的にvalueを使ってテキストを取得するというルールがあります。

僕の場合は、form部品内のテキストの取得にinnerHTMLを使ってしまい、テキスつの取得ができないという謎の現象にスッと悩まされて時間をかなり使った経験があります。笑

なので、fomタグ内のinput,textareaなどのタグは基本的にはvalueを使ってテキストを取得しましょう!

textContent

textContentはHTMLのタグを文字列として認識して、情報を取得します。
<p><h2>などのタグも文字列として認識して、取得します。

「<h2>おはよう日本!</h2>」
上記のように、タグも含めたカッコ内は一つの文字列として、認識されるということです。

なので、上記の文字列を反映すると、文字はh2に変換されるわけではなく、「<h2>おはよう日本!</h2>」と反映されます。

innerHTML

innerHTMLタグは文章中に含まれるHTMLタグを有効なHTMLタグとして認識します。

ここがtextContentとの違いです。

タグが有効になっているので、HTMLを書き換えて再出力したいときなんかに便利です。

<h2>おはよう日本!</h2>

innerHTMLで上記のテキストを出力すると、h2タグが有効になっているので、テキストはh2が適用されて、「おはよう日本!」とだけ表示されます!

最後に

それでは最後にまとめて終わりたいと思います!

value
・・・form部品のテキストの取得にはvalueを用いるのが鉄則

textContent
・・・タグを文字列と認識して処理を行う

innerHTML
・・・タグを有効にした状態で文字列の処理を行う

以上になります!
似たようなメソッドにはなりますが、若干それぞれで役割が違ってきますので、ここは是非抑えておきましょう!

ありがとうございました!

スポンサーリンク




この記事を書いた人