JavaScriptでWebページの仕組みを理解する方法｜DOM・HTML構造・id/classを初心者向けに解説【第9講】 | JavaScript入門

■ 今回のゴール

今回は、JavaScriptでWebページを操作する前に「仕組み」を理解します。

<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のように、タグに追加情報を与えるものを属性と呼びます。

<p id="title">タイトル</p>

idは要素に名前をつける仕組みです。JavaScriptやCSSから特定するために使います。

同じページ内では1つの要素に対して1つだけ使います。

<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が子要素です。

<div>
  <h1>タイトル</h1>
  <p>文章1</p>
  <p>文章2</p>
</div>

div
 ├ h1
 ├ p
 └ p

HTMLは、ブラウザに読み込まれるとJavaScriptで操作できる構造（DOM）に変換されます。

JavaScriptはこのDOMを操作します。

<p><strong>こんにちは</strong></p>

この場合、<strong>は「太字にする」という命令として処理されます。

その結果、「こんにちは」が太字で表示されます。

<p>&lt;strong&gt;こんにちは&lt;/strong&gt;</p>

< や > は < や > に変換され、結果として <strong>こんにちは</strong> という文字列になります。

しかしこれはタグとしては処理されず、文字列としてそのまま表示されます。

見た目が同じでも意味が異なります。この違いは次回のDOM操作で重要になります。