INTERMEDIATE
2 hours•4 chapters
DOM Manipulation
Learn how to dynamically update web pages to create interactive business applications.
Progress: 0%In progress
What You'll Learn
getElementById と querySelector でページの要素を選択する
テキスト・属性・スタイルを更新し、クリックや入力イベントに応答する
要素の作成と削除を行い、イベントデリゲーションを使ってデータから描画する
バリデーション付きのフォーム送信を処理し、更新を高速かつレスポンシブに保つ
Description
DOM 操作とは、Web ページが読み込まれた後に変化する仕組みのことです。メッセージを表示する、テーブルに行を追加する、フォームをバリデーションする、クリックに反応する——本チュートリアルでは、あらゆるフレームワークの土台となっているブラウザのネイティブ API（getElementById、querySelector、textContent、classList、addEventListener、createElement）を扱います。
実行可能なコード例と、ブラウザ上で実際にクリックできるインタラクティブな ToDo デモを使って 4 つの章を進めていきます。デモの横には同等の素の DOM コードも掲載しています。各章では、望む動作を AI アシスタントに伝え、返ってきたものを確認する方法も紹介します。
最後まで進めば、要素を安全に選択し、イベントを配線し、データ配列からリストを描画し、送信時にフォームをバリデーションし、ページを遅く感じさせる layout thrashing のパターンを避けられるようになります。
What's inside
About 2 hours•4 chapters
- 1.要素の選択 — DOM とは何か、getElementById と querySelector による要素の検索、そして望む変更を AI アシスタントに伝える方法。
- 2.テキスト・スタイル・イベント — テキスト・属性・スタイルの読み取りと変更、そして最初の click・input リスナーの配線。
- 3.イベントと描画 — 要素の作成と削除、イベントデリゲーション、データ配列からの DOM 描画。
- 4.フォームとパフォーマンス — バリデーション付きフォーム送信の処理に加え、高速でレスポンシブなアプリのためのバッチ処理とデバウンス。
Work through the chapters in order — each one builds on the last, and the live to-do demo in Chapter 3 lets you run the concepts for real.