第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 本章のまとめ
