導入
Webサイトを動的に変化させる際、避けて通れないのが「DOM（Document Object Model）」という仕組みです。その中でも「Element（要素）」は、HTMLタグ（div、p、buttonなど）をJavaScriptで操作するための最も基本的な単位です。Elementを理解することで、「ボタンを押したら文字を変える」「入力内容を検証する」といったWebサイト特有のインタラクションを実現できるようになります。
基礎知識
ブラウザはHTMLファイルを読み込むと、それをツリー状の構造（DOMツリー）としてメモリ上に展開します。このツリーの構成要素一つひとつが「Element」です。
JavaScriptからこのElementを操作するには、まず「どの要素を触りたいか」を指定する必要があります。これを「DOMセレクタ」と呼びます。代表的なものには、以下があります。
document.querySelector()：CSSセレクタを使って、最初に見つかった要素を一つだけ取得します。
document.getElementById()：id属性を指定して、特定の要素を一つだけ取得します。
実装/解決策
Elementを取得した後は、そのプロパティやメソッドを使って中身を書き換えたり、スタイルを変更したりします。よく使われる操作は以下の通りです。
1. textContent：要素内のテキストを書き換えます。
2. style.プロパティ名：CSSのスタイルを直接変更します。
3. addEventListener：クリックや入力などの「イベント」を検知して処理を実行します。
サンプルプログラム
以下のコードをHTMLファイルに記述し、ブラウザで開いてみてください。ボタンを押すとメッセージが切り替わり、色が変わる仕組みです。
応用・注意点
現場で開発する際に気をつけるべきポイントが2つあります。
一つ目は「読み込みのタイミング」です。HTMLが読み込まれる前にJavaScriptが実行されると、Elementがまだ存在せずエラー（null）になります。JavaScriptファイルはHTMLの最後に読み込むか、scriptタグに「defer」属性を付けて対策しましょう。
二つ目は「パフォーマンス」です。DOM操作はブラウザにとって比較的重い処理です。ループの中で何度もDOMを書き換えるような処理は避け、一度変数に格納してから操作するなどの工夫を心がけると、より快適なWebサイトになります。まずは簡単なElement操作から始めて、徐々に複雑なUI作りに挑戦してみてください。