もう悩まない！valueとtextContentとinnerHTMLの違いと使い分け【JavaSctipt】

IT・ウェブ/
javasctiptの文字の扱い方
JavaSctiptを学び始めて初心者がつまずくのが、「同じような動作をするメソッドがいっぱいある！」ことじゃないでしょうか？ どれを使ってもきちんと動くならいいのですが、使うメソッドによっては思ったような動作をしてくれないことも。 その代表格とも言えるのがvalueとtextContentとinnerHTMLです。 どれも文章を取得したり変更したりに関わっていますが、プログラムでの動作のされ方は異なっています。 私もツールを作るときに「どれ使っていいの？適当でいい？」とかなり悩み、案の定うまく動かなくて困ってしまったことがあります。 これらをうまく使いこなす解決策は、仕組みと構文ルールを理解することにあります。 textContentとinnerHTMLの違いをまとめた記事はありましたが、valueについて触れているわかりやすい記事は執筆当時見かけなかったため、使い分け術についてまとめておきます。

目次

form部品の文章を扱うときはvalueが鉄則

formのタグの中で扱われるinputやtextareaといったタグは、基本的にvalueを使って中のテキストを取得するというルールがあります。 学習本などでは記載が省かれていることもあり、初心者的には分かりづらいですよね。 これは「そういうもの」として覚えてしまいましょう。 getElementByIdで呼んでくる場合はid名を付けることをお忘れなく。 例文） document.getElementById(‘id名’).value [adrotate banner=”6″]  

textContentはHTMLなどのタグを「文字列」として扱う

textContentで取得されたり、出力された文章は、HTMLタグなどが含まれていてもそれを「文字列」として扱います。 ですので、出力した先で

を見出しとして表示したい、といった場合にはうまく働いてくれません。

また、form部品の中で記述されたテキストは、textContentで扱うことはできません。 textareaは閉じタグとの間に初期値を設定できる関係から、変数として文字を取得すること自体はできるようですが、消したり表示したり操作などをしようとするとうまく働かないため、valueを使いましょう。 ※inputではそもそも取得自体ができないようです。上で述べた通り、form部品の文章はvalueで扱うのが無難です。 基本的にはpやdivの中のテキストをベタ打ちの文字列として扱う時に使用されるのがtextContent、と覚えておきましょう。

innerHTMLはHTMLタグを「有効なHTMLタグ」として扱う

innerHTMLは、文章中に含まれているHTMLタグを有効なHTMLタグとして扱います。 ここがtextContentとの最大の違いです。 タグの機能を保持しているので、HTMLを書き換えて再出力するような動きをさせたい時に便利です。 また、innerHTMLは強制力が強く、removeChildでうまく消せないような場合でも文章を書き換えることができます。 実際にHTML側に出力する際によく使われます。

HTMLを見た目に反映させたいならinnerHTML・ベタ打ちで出力したいならtextContent

以上のことから、 HTMLを見た目通りに反映させたり、タグの機能を持った状態で扱いたい場合はinnerHTMLただの文字列としてベタ打ちで出力したいならtextContent formの部品（inputやtextarea）の文章を扱う場合はvalue と覚えておくと、迷わず使い分けることができます。 ◆この記事を読んだ人にオススメ！