DOM操作
第13回 • 40枚
ナレーション
第13回 スライド1: DOM操作へようこそ
前回の復習
- 条件分岐（if、else if、else、switch）
- 繰り返し（for、while、do-while、for...of）
- 関数の定義と呼び出し（関数宣言、アロー関数）
今回のテーマ
DOM操作：JavaScriptによる動的な画面更新
これまでの学習
| 回 | 内容 |
|---|---|
| 第3回 | HTML - 文書構造 |
| 第4回 | CSS - スタイリング |
| 第7-8回 | JavaScript基礎 |
DOMとは
Document Object Model
- HTMLをJavaScriptで操作するための仕組み
- Webページをオブジェクトとして表現
flowchart TD
A[HTML文書] --> B[DOM]
B --> C[JavaScript]
C --> D[要素の内容変更]
C --> E[スタイル変更]
C --> F[要素の追加・削除]
C --> G[イベント処理]
D --> H[動的なWebページ]
E --> H
F --> H
G --> H
できること
- 要素の内容を変更
- スタイルを動的に変更
- 要素の追加・削除
- イベントに反応
今回の目標
JavaScriptでHTMLを自由に操作し、インタラクティブなWebページを作れるようになる
1/40