■ 今回のゴール
今回は、JavaScriptでWebページを操作する前に「仕組み」を理解します。
- HTMLの構造を理解する
- id・classの役割を理解する
- DOMの仕組み（ツリー構造）を理解する
■ HTMLの基本（復習＋強化）
■ タグと要素
<p>こんにちは</p><p>はタグ、全体を要素と呼びます。
■ タグの種類
<p>文章です</p>
<a href="https://example.com">リンク</a>
<img src="image.jpg">タグによって役割が異なります（文章・リンク・画像など）。
■ 属性とは
<a href="https://example.com">リンク</a>
<img src="image.jpg">hrefやsrcのように、タグに追加情報を与えるものを属性と呼びます。
■ id と class
■ idとは
<p id="title">タイトル</p>idは要素に名前をつける仕組みです。JavaScriptやCSSから特定するために使います。
同じページ内では1つの要素に対して1つだけ使います。
■ classとは
<p class="text">文章1</p>
<p class="text">文章2</p>classは複数の要素を同じグループとしてまとめるために使います。
■ 違い
| 項目 | id | class |
|---|---|---|
| 数 | 1つ | 複数 |
| 用途 | 特定 | グループ |
■ 親要素と子要素
<div>
<h1>タイトル</h1>
<p>文章1</p>
<p>文章2</p>
</div>HTMLはこのように入れ子（ネスト）構造になっています。
divが親要素、h1やpが子要素です。
■ DOMとは
<div>
<h1>タイトル</h1>
<p>文章1</p>
<p>文章2</p>
</div>div
├ h1
├ p
└ pHTMLは、ブラウザに読み込まれるとJavaScriptで操作できる構造（DOM）に変換されます。
- 親 → 子の関係を持つ
- ツリー構造になる
JavaScriptはこのDOMを操作します。
■ テキストとHTMLの違い
■ HTMLとして扱う
<p><strong>こんにちは</strong></p>この場合、<strong>は「太字にする」という命令として処理されます。
その結果、「こんにちは」が太字で表示されます。
■ 文字として扱う
<p><strong>こんにちは</strong></p>< や > は < や > に変換され、結果として <strong>こんにちは</strong> という文字列になります。
しかしこれはタグとしては処理されず、文字列としてそのまま表示されます。
■ ポイント
- タグとして書く → 命令として動く
- 文字として書く → 表示されるだけ
見た目が同じでも意味が異なります。この違いは次回のDOM操作で重要になります。
■ まとめ
- HTMLはタグと要素で構成される
- 属性はタグに情報を追加する
- idは1つを特定、classは複数をまとめる
- HTMLは入れ子構造を持つ
- DOMはHTMLを構造として扱ったもの
- DOMはツリー構造で表される
- タグは命令として動くことがある
コメント