第8章 DOM操作とイベント

本章では、JavaScript を使って Web ページの要素を操作する「DOM 操作(ドム そうさ)」について学習します。これまで学んできた変数、関数、配列、オブジェクトなどの知識を使って、実際にブラウザ上の HTML 要素を動的に変更したり、ユーザーの操作に反応したりできるようになります。

【この章のポイント】

  • DOM とは何か
  • querySelector によるモダンな要素取得
  • 要素の内容とスタイルの変更
  • addEventListener によるイベント処理
  • 動的な要素の追加と削除
  • スクリプトの実行タイミングと defer 属性

第8章 DOM操作とイベント
8.1 DOMとは
8.2 モダンなDOM操作
  _8.2.1 querySelector と querySelectorAll
  _8.2.2 要素の取得と操作のプログラム
8.3 要素の内容とスタイルの変更
  _8.3.1 textContent と innerHTML
  _8.3.2 classList(add, remove, toggle)
  _8.3.3 要素の内容とスタイルを変更するプログラム
8.4 イベント処理
  _8.4.1 addEventListener の使い方
  _8.4.2 イベントオブジェクトと preventDefault
  _8.4.3 イベント処理のプログラム
8.5 動的な要素の追加と削除
  _8.5.1 createElement, appendChild, removeChild
  _8.5.2 動的リストを作成するプログラム
8.6 スクリプトの実行タイミング
  _8.6.1 defer属性とDOMContentLoadedイベント
  _8.6.2 defer属性を使ったプログラム
8.7 本章のまとめ