もう悩まない!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. 長尾為景は天下無二の奸雄
    上杉謙信の父・長尾為景(ながおためかげ)は、下剋上の代名詞であり、また「天下無二の奸雄」というあだ名…
  2. もいわ太陽食堂
    札幌市電「ロープウェイ入口」駅から徒歩すぐにある、隠れ家的沖縄料理のお店「もいわ太陽食堂」。 …
  3. メンタルの薬
    メンタル系の医者から処方される薬にはいろいろあるけれど、どれも副作用でだめだった、というある人間の記…
  4. 大倉山展望台リフト
    札幌市中心部にある観光施設:大倉山(おおくらやま)展望台・ジャンプ台の正式名称は大倉山ジャンプ競技場…
  5. FF14リテイナー装備
    ファイナルファンタジー14で、冒険者(プレイヤー)の荷物などを預かってくれる「リテイナー」。 容姿…

Facebook

 スポンサーリンク


記事を書いている人

校倉

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

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

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

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

ページ上部へ戻る