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

javasctiptの文字の扱い方

スポンサーリンク


JavaSctiptを学び始めて初心者がつまずくのが、「同じような動作をするメソッドがいっぱいある!」ことじゃないでしょうか?
どれを使ってもきちんと動くならいいのですが、使うメソッドによっては思ったような動作をしてくれないことも。
その代表格とも言えるのがvalueとtextContentとinnerHTMLです。
どれも文章を取得したり変更したりに関わっていますが、プログラムでの動作のされ方は異なっています。
私もツールを作るときに「どれ使っていいの?適当でいい?」とかなり悩み、案の定うまく動かなくて困ってしまったことがあります。
これらをうまく使いこなす解決策は、仕組みと構文ルールを理解することにあります。

textContentとinnerHTMLの違いをまとめた記事はありましたが、valueについて触れているわかりやすい記事は執筆当時見かけなかったため、使い分け術についてまとめておきます。

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

formのタグの中で扱われるinputやtextareaといったタグは、基本的にvalueを使って中のテキストを取得するというルールがあります。

学習本などでは記載が省かれていることもあり、初心者的には分かりづらいですよね。

これは「そういうもの」として覚えてしまいましょう。
getElementByIdで呼んでくる場合はid名を付けることをお忘れなく。

例文)
document.getElementById(‘id名’).value

 

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

と覚えておくと、迷わず使い分けることができます。

◆この記事を読んだ人にオススメ!

JavaScript初心者が考える、初心者に最適な学習本の条件4つ

HTML/CSS】コードが正しいのに画像が表示されない時は拡張子の表示設定を見直す!

WordPressブログの表が変?スマホではみ出る時の対処法と解説!CSSにこのコードを入れるだけ!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でフォローしよう!

スポンサーリンク


校倉

投稿者プロフィール

「戦国らいふ」は校倉が管理しているブログです。
ブログと管理人についての詳細はこちら。
連絡・お問い合わせは[email protected]まで。

※自分のことで精一杯なので、個人的な相談等には対応しておりません

この著者の最新の記事

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

コメントするためには、 ログイン してください。

 スポンサーリンク


おすすめ記事

  1. 発達障害者の成功例は夫婦ばかり?
    大人の発達障害者は成人の就職率が4人に1人という低い数字だとされているくらい、「普通」に生きていくの…
  2. 風林火山
    今更も今更ですが、2007年の大河ドラマ「風林火山」を全話見ました。 見終わってから気づいたけど全…
  3. 就労継続支援に通わないほうがいい例
    医師に薦められて障害者の就労をサポートする就労移行支援事業所なるところに通い始めて数ヶ月。 先…
  4. 甘くない北海道土産ランキング
    旅行の楽しみといったら、お土産!という人は多いですよね。 ましてやそれが食べ物のおいしい北海道…
  5. さっぽろレインボープライド感想
    セクシュアルマイノリティやLGBTsのイベント・レインボーパレードってご存知でしょうか。 主催団体…

Facebook

 スポンサーリンク


記事を書いている人

校倉

ゲーム・創作活動・歴史などが好き。

記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

連絡・お問い合わせは[email protected]まで。

※自分のことで精一杯なので、個人的な人生相談等には対応しておりません

ページ上部へ戻る