itスポンサーリンクJavaSctiptを学び始めて初心者がつまずくのが、「同じような動作をするメソッドがいっぱいある!」ことじゃないでしょうか?どれを使ってもきちんと動くならいいのですが、使うメソッドによっては思ったような動作をしてくれないことも。その代表格とも言えるのがvalueとtextContentとinnerHTMLです。どれも文章を取得したり変更したりに関わっていますが、プログラムでの動作のされ方は異なっています。私もツールを作るときに「どれ使っていいの?適当でいい?」とかなり悩み、案の定うまく動かなくて困ってしまったことがあります。これらをうまく使いこなす解決策は、仕組みと構文ルールを理解することにあります。textContentとinnerHTMLの違いをまとめた記事はありましたが、valueについて触れているわかりやすい記事は執筆当時見かけなかったため、使い分け術についてまとめておきます。見出しとして表示したい、といった場合にはうまく働いてくれません。HTMLを見た目に反映させたいならinnerHTML・ベタ打ちで出力したいならtextContentform部品の文章を扱うときはvalueが鉄則formのタグの中で扱われるinputやtextareaといったタグは、基本的にvalueを使って中のテキストを取得するというルールがあります。学習本などでは記載が省かれていることもあり、初心者的には分かりづらいですよね。これは「そういうもの」として覚えてしまいましょう。getElementByIdで呼んでくる場合はid名を付けることをお忘れなく。例文)document.getElementById(‘id名’).valuetextContentは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ただの文字列としてベタ打ちで出力したいならtextContentformの部品(inputやtextarea)の文章を扱う場合はvalueと覚えておくと、迷わず使い分けることができます。@sengokulife1059テーマ別の「特集コーナー」や「このサイトについて」もどうぞ。protected]まで。投稿者プロフィール「戦国らいふ」は校倉が管理しているブログです。ブログと管理人についての詳細はこちら。protected]まで。PR】同人印刷所「メディバンファクトリー」まとめ。送料込み1冊印刷&W...2019/11/29コツ・豆知識・メモ楽天ペイ(アプリ版)ではKyash等3Dセキュア非対応クレジットカードは...2019/10/23コツ・豆知識・メモFirefoxでPrimeVideoとAmazonMusicが見れない!...2019/10/19コツ・豆知識・メモ【キャッシュレス】AppleStoreではKyashなどプリペイド系クレ...関連記事グラフィックボードの選び方と気をつけることまとめ【GoogleChrome】コーディング中にCSSがうまく反映さ...【HTML/CSS】コードが正しいのに画像が表示されない時は拡張...ADHD傾向のある大人におすすめな生活系無料アプリ5つ(iOS向...図書館にない本を借りたいときは相互貸借制度が便利ですコメントトラックバックは利用できません。(0)この記事へのコメントはありません。【FF14攻略】ギルドリーヴでクラフターレベル上げ!50までの最速ルートまとめおすすめ記事2019/6/15セール期間外にPC版隻狼(sekiro)を一番安く買うならAmazon!その理由フロム・ソフトウェアとActivisionの戦国アクションゲーム「隻狼(sekiro)」。発売か...2017/9/6パソコンパーツ初心者が電源を交換するときに気を付けるべき点プレイしているオンラインゲームの推奨環境が上がったことをきっかけに、先日グラフィックボードを変えよう...2019/8/17もう悩まない!valueとtextContentとinnerHTMLの違いと使い分け【JavaSctipt】JavaSctiptを学び始めて初心者がつまずくのが、「同じような動作をするメソッドがいっぱいある!...2016/9/1少部数かつ安く同人誌を印刷したい場合のおすすめ印刷所まとめ(2020年版)同人誌を作るとき、コピー本やキンコーズも悪くはないけど、印刷所も使ってみたい。大手の同人印刷...2018/9/15札幌市民おすすめ!北海道旅行の甘くないお土産ランキングTOP3旅行の楽しみといったら、お土産!という人は多いですよね。【PR】同人印刷所「メディバンファクトリー」まとめ。校倉ゲーム・創作活動・歴史などが好き。記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。protected]まで。