8.7 本章のまとめ
この章では次のようなことを学習しました。
Pickup Lecture
- DOM（Document Object Model）は、HTML を JavaScript から操作できるようにするための仕組みである。
- querySelector と querySelectorAll は、CSS セレクタを使って柔軟に要素を取得できる現代的なメソッドである。
- textContent はテキストのみ、innerHTML は HTML タグとして扱う。セキュリティのため基本は textContent を使う。
- classList の add、remove、toggle メソッドで、要素の CSS クラスを簡単に操作できる。
- addEventListener を使って、クリックやキー入力などのイベントに反応する処理を登録できる。
- createElement と appendChild を使って、動的に新しい要素を作成・追加できる。
- defer 属性を<script>タグに付けることで、<head>内に書いても HTML の読み込み完了後にスクリプトが実行される。DOMContentLoaded イベントと組み合わせることで、より堅牢な初期化処理が書ける。
この章では、JavaScript を使った DOM 操作について学習しました。
これまで学んできた変数、関数、配列、オブジェクトといった基礎知識が、実際の Web ページを動的に変更する力として結びついたことを実感できたと思います。
DOM 操作は、ユーザーインターフェース（UI）を作る上で最も基本的で重要な技術です。ボタンをクリックしたときに何かが起こる、入力フィールドの値を取得して処理する、画面に新しい要素を追加するといった操作は、ほぼすべての Web アプリケーションで必要になります。この章で学んだ内容は、次章以降の非同期処理や Web API との連携でも頻繁に使用します。実際に手を動かして、様々なパターンの DOM 操作に慣れていきましょう。