Webサイトの見た目や内容を後から変えたいとき、JavaScriptを使えばHTMLの中身を自由に操作できます。「すでに表示されている文字を変えたい」「フォームに自動で文字を入れたい」といったニーズに応えるために、JavaScriptはとても役立ちます。
本記事では、テンプレートとして用意されたHTMLの要素に対して、JavaScriptを使って上から書き換える方法を、初心者でも迷わず理解できるように、シンプルかつ具体的に紹介します。
とくに「textContent」と「value」という基本的なプロパティの使い方を中心に説明していきます。これらを覚えれば、表示されているテキストやフォームの入力値を、JavaScriptで自在に操作できるようになります
textContentとvalueの違いを理解しよう
JavaScriptでHTMLの中身を変更するとき、対象の要素によって使うプロパティが異なります。
とくに、テキスト要素と**フォーム要素（とくにテキストエリア）**では使い方が違うため、まずはその違いを押さえておきましょう。
テキスト要素には.textContent
見出し（<h1>〜<h6>）、段落（<p>）、<div>など、表示されるだけのテキストを扱う要素には、textContentプロパティを使います。
<p id="message">こんにちは！</p>document.getElementById("message").textContent = "こんばんは！";このように書くことで、「こんにちは！」と表示されていた部分が「こんばんは！」に変わります。
テキストエリアには.value
一方で、<textarea>や<input type="text">などのフォームで使われる入力欄は、textContentではなく、valueプロパティを使います。
<textarea id="memo">初期メモ</textarea>document.getElementById("memo").value = "あとでやること";これで、テキストエリアの中に表示される文字が「あとでやること」に変更されます。
このように、要素の種類によってプロパティを正しく使い分けることが、JavaScriptでのHTML操作の基本です。
まとめ
JavaScriptを使えば、テンプレートとして用意されたHTMLの内容を動的に書き換えることができます。
今回紹介したように、表示用の要素にはtextContent、入力欄にはvalueを使うというシンプルなルールを覚えておくだけで、さまざまなシーンで役立つ操作ができるようになります。
- 見出しや本文の表示内容を差し替えたいとき →
textContent - テキストエリアやインプット欄の初期値を変えたいとき →
value
この基本をしっかり押さえれば、WebページのUIをJavaScriptで柔軟にコントロールできるようになります。
