この記事の対象
- HTMLのタグを書き始めたばかりの人
- JavaScriptはまだ知らない、という人（雰囲気だけ伝わればOKな書き方にしています）
「パース」「DOM」という言葉を初めて聞いた状態から読めるようにしました。
1. HTMLは「箱の中に箱」でできている
まずはHTMLの形を確認します。
<body>
<h1>Hello, World!</h1>
</body>
<body> で始まって </body> で終わっています。
-
<body>… 開始タグ（ここから始まるよ、という合図） -
</body>… 終了タグ（/が付いているほう。ここで終わるよ、という合図） - この開始タグから終了タグまでのひとかたまりを 要素（ようそ / element） と呼びます
大事なのは、要素の中に別の要素を入れられるということです。上の例では body という大きな箱の中に、h1 という小さな箱が入っています。この入れ方を「入れ子（いれこ）」と言います。
もう少し大きなHTMLで、箱の入れ子を絵にしてみます。
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<a href="https://example.com">Go to Example</a>
</body>
</html>
この記事では、最後までこのHTMLを使います。
<!DOCTYPE html> って何？
「このファイルはHTMLです」とブラウザに伝えるだけの1行です。タグではないので、箱としては数えません。おまじないだと思って毎回いちばん上に書けばOKです。
2. でも、コンピュータには「箱」が見えていない
ここが今回のいちばん大事なところです。
私たちは字下げ（インデント）を見て「h1 は body の中だな」と一瞬で分かります。でも、HTMLファイルの中身は、コンピュータにとってはただの文字の並びです。改行も字下げも、単なる「文字」として並んでいるだけ。
イメージするとこんな感じです。
<html><head><title>My Page</title></head><body><h1>Hello, World!</h1><a href="https://example.com">Go to Example</a></body></html>
この状態のままでは、ブラウザは「見出しを大きく表示しよう」とも「リンクをクリックできるようにしよう」とも判断できません。文字の並びから、箱の入れ子関係を組み立て直す作業が必要です。
3. その組み立て作業が「パース」
パース（parse） とは、文字の並びを読み取って、意味のあるかたまりに分解し、関係を組み立てることです。日本語では「構文解析」と言います。
日本語の文で例えるとこうです。
私はリンゴを食べた
↓ パースすると
だれが：私 なにを：リンゴ どうした：食べた
HTMLでも同じことをします。
<h1>Hello, World!</h1>
↓ パースすると
タグの種類：h1 中身の文字：Hello, World!
パーサー（parser）とは
この解析をするプログラム本体のこと。「パース」が作業の名前、「パーサー」が作業をする担当者です。ブラウザにはこのパーサーが最初から入っているので、自分で用意する必要はありません。
流れを図にすると、こうなります。
4. 組み立てた結果が「DOMツリー」
パースしてできた組み立て結果を DOM（ドム / ディー・オー・エム） と呼びます。Document Object Model の略です。
形が木のように枝分かれしていくので、DOMツリー（木構造）と呼ばれます。家系図をイメージすると分かりやすいです。ただし、木といっても根っこが一番上にあって、下へ枝が伸びていく形で描くのが習慣です。
さっきのHTMLをパースすると、こうなります。
図が表示されないときのために、同じ内容を文字でも書いておきます。
Document（ページ全体・根っこ）
└─ html
├─ head
│ └─ title
│ └─ 「My Page」 ← 文字
└─ body
├─ h1
│ └─ 「Hello, World!」 ← 文字
└─ a ← href="https://example.com" という属性つき
└─ 「Go to Example」 ← 文字
図の読み方
タグだけでなく、中の文字も部品として並んでいるのがポイントです。この一つひとつの部品を ノード と呼びます。
| 名前 | 読み方 | 何を指すか |
|---|---|---|
| ノード | node | ツリーを作る部品ひとつぶん。「節（ふし）」という意味 |
| 要素ノード | ようそノード |
html や h1 など、タグから作られた部品 |
| テキストノード | テキストノード | 「Hello, World!」など、文字から作られた部品 |
| Document | ドキュメント | ページ全体を表す、いちばん上の部品 |
家族の関係と同じ言い方をします。
-
親 … ひとつ上の部品（
h1の親はbody） -
子 … ひとつ下の部品（
bodyの子はh1とa） -
兄弟 … 同じ親を持つ部品どうし（
h1とaは兄弟）
href はなぜ枝分かれしていないの？
href="https://example.com" は 属性といって、a 要素に付いている追加情報です。子どもではなく「a が持っているメモ」のような扱いなので、下に枝を伸ばさず a の中に書いてあります。
5. わざわざ木にすると、何がうれしいの？
① ブラウザが画面を描ける
「h1 は body の中の1番目だから、この位置にこの大きさで描こう」と判断できます。木の形になっていないと、そもそも表示ができません。
② あとから中身を書き換えられる
HTMLの次に学ぶことが多い JavaScript は、このDOMツリーを触ることでページを変化させます。今は読めなくて大丈夫ですが、雰囲気だけ見てみましょう。
document.querySelector('h1').textContent = 'さようなら';
やっていることは2ステップだけです。
① document.querySelector('h1')
→ ツリーの中から h1 の部品を探す
② .textContent = 'さようなら'
→ その下の文字「Hello, World!」を「さようなら」に変える
結果として、画面の見出しが「Hello, World!」から「さようなら」に変わります。ページを読み込み直さずに表示を変えられるのは、この仕組みのおかげです。
document は「ページ全体」、つまりツリーの根っこを指す言葉です。ここから下へたどっていきます。
③ 情報を自動で集められる（スクレイピング）
スクレイピングとは、プログラムがウェブサイトを見て回り、欲しい情報だけを抜き出すことです。「この商品名の下にある値段の部品」のように場所を指定できるので、木の形になっていると探しやすくなります。
6. 「住所」でたどれるようになる
DOMツリーは、パソコンのフォルダとよく似ています。
フォルダ： デスクトップ → 資料フォルダ → メモ.txt
DOM ： document → body → h1
上から順に下へたどって目的の場所に着く、という感覚は同じです。だから「HTMLの好きな場所をプログラムから指定できる」ようになるわけです。
7. 今のうちに知っておくと後で助かること
書いたHTMLファイルと、DOMは別のもの
DOMは、パースした結果としてブラウザの中に作られた組み立て済みのコピーです。JavaScriptでDOMを書き換えても、自分が保存したHTMLファイルの中身は変わりません。
ブラウザで F12 キーを押すと開発者ツールが開き、HTMLのような表示が見られます。あれはファイルの中身そのものではなく、今のDOMの状態です。
終了タグを忘れても、勝手に直されることがある
HTMLのパーサーは親切なので、閉じタグがなくてもエラーで止まらず、推測して補ってしまいます。そのため「書いたつもりの形」と「実際に組み立てられた形」がズレて、思った表示にならないことがあります。表示がおかしいときは、まずタグの閉じ忘れを疑うと原因が見つかりやすいです。
8. 用語まとめ
| 用語 | 意味 |
|---|---|
| パース | 文字の並びを解析して、構造を組み立てること |
| パーサー | パースをするプログラム。ブラウザに内蔵されている |
| DOM | パースの結果できあがった、ページの組み立て図 |
| DOMツリー | DOMが枝分かれした木の形になっているもの |
| ノード | ツリーを作る部品ひとつぶん（タグも文字もノード） |
| 要素 | 開始タグから終了タグまでのひとかたまり |
| 属性 |
href="..." のように、要素に付ける追加情報 |
| 親・子・兄弟 | ツリー上の位置関係の呼び方 |
| レンダリング | データをもとに画面の見た目を描くこと |
| スクレイピング | プログラムでウェブページから情報を抜き出すこと |
まとめ
- HTMLは「箱の中に箱」の入れ子だが、コンピュータにはただの文字の並びに見えている
- その文字の並びから箱の関係を組み立てる作業が パース
- 組み立て結果が DOMツリー。タグも文字も「ノード」という部品になって木の形に並ぶ
- 木になっているおかげで、画面に表示したり、あとから書き換えたり、情報を抜き出したりできる
HTMLを書くときに「この形がツリーになるんだな」と頭の片隅で思い浮かべられると、次にJavaScriptを学ぶときの理解がぐっと早くなります。