DOMとは？JavaScriptがWebページを操作する対象を小学生でもわかるように整理

DOMとは、Webページの部品をブラウザーの中で扱いやすい形にしたものです。JavaScriptがWebページを動かせるのは、このDOMを操作しているからです。まず押さえるべきなのは、DOMは「画面そのもの」ではなく、「画面の中身を木のように整理したデータのまとまり」だという点です。

DOMは Document Object Model の略です。HTMLで書いたページをブラウザーが読み込むと、ブラウザーはその内容をもとにDOMを作ります。JavaScriptは、そのDOMを見たり、書きかえたり、部品を増やしたり消したりできます。つまり、DOMはHTMLとJavaScriptをつなぐ橋のような役割です。

ここで大事なのは、HTMLとDOMは同じではないことです。HTMLは人が書く元の文章、DOMはブラウザーが読み取って作った「動かせる形」です。見た目が同じでも、中ではブラウザーが整えたDOMが使われています。

ブラウザーはHTMLを読んでDOMを作り、JavaScriptはそのDOMを触って画面を更新するからです。HTMLの文字列を直接いじるのではなく、DOMという部品表を操作します。

DOMの基本を先にそろえる

DOMは木の形で考えるとわかりやすいです。ページ全体が1本の木で、html の中に head と body があり、body の中に見出し、段落、画像、ボタンなどがぶら下がっています。ひとつひとつの部品を「ノード」と呼びます。とくに、タグの部分は要素ノード、文字はテキストノードとして扱われます。

JavaScriptはこの木をたどって、必要な部品を探します。たとえば document.querySelector('#title') のように書くと、IDが title の要素を見つけられます。そのあとで textContent を変えれば文字が差し替わり、classList を変えれば見た目の切り替えにもつながります。

DOMは「構造」を扱う仕組みなので、CSSのように色や大きさだけを決めるものとは役割が違います。CSSは見た目、DOMは部品の入れもの、JavaScriptはその部品を動かす担当、と考えると整理しやすいです。

身近なたとえで考えるDOM

DOMを学校の教室にたとえると、HTMLは「座席表の紙」です。どこに机があるか、だれがどこに座るかを書いた設計図です。DOMは、実際に教室へ入ったあとに並んでいる机や名札の配置です。先生が黒板に書いた指示を見て、机を動かしたり、名札を付け替えたりできる状態です。

JavaScriptは、その教室で動ける係です。名札を変える、掲示を追加する、消しゴムを片づける、といった作業をします。紙の座席表そのものを毎回書き直すのではなく、今ある教室の中身をその場で整えるイメージです。

だから、JavaScriptでできることは「文章を読む」だけではありません。入力された文字をチェックしたり、クリックに反応して表示を変えたり、APIから取ってきたデータを画面に入れたりできます。DOMは、その作業台です。

実務ではどう使うのか

1. ボタンを押したら文言を変える

たとえば「もっと見る」ボタンを押したら、説明文を開いたり閉じたりしたい場面があります。JavaScriptはDOMからその段落やボタンを見つけて、表示・非表示の切り替えをします。ページを読み直さなくても動くので、操作感がよくなります。

2. フォームの入力チェックをする

入力欄に文字が入っているか、メールの形になっているかを、送信前に確認したいことがあります。こうした場面では、フォームの要素をDOMで取得して、入力内容を見ます。空欄なら注意文を出し、入力が正しければ送信へ進める、という流れです。

3. APIの結果を画面に出す

Webアプリでは、サーバーからデータを取ってきて、その内容を画面に表示することがよくあります。REST APIから返ってきた JSON を受け取り、JavaScriptがDOMを使って一覧やカードを作ります。たとえば、商品名、価格、在庫数を1件ずつ画面に並べる処理です。ここでは、データそのものと表示する場所を分けて考えるのがポイントです。

実際のコードでは、APIから受け取った配列をループしながら、li や div をDOMに追加していきます。これにより、ページ全体を作り直さなくても、必要な部分だけを更新できます。

4. 開発環境と本番環境で差を確認する

DOM操作は、作った人のPCでは動くのに、本番では見え方が違うことがあります。そのため、開発環境と本番環境の違い を理解しておくことが大切です。読み込むCSSやJavaScriptの順番、画像のパス、APIのURLが違うと、DOMの更新結果も変わることがあります。

また、画面が思った通りに変わらないときは、テストで「押したら変わるか」「入力したらエラー文が出るか」を確かめると見つけやすいです。DOMは目に見える結果に直結するので、動作確認の順番を決めておくと調べやすくなります。

図解で整理

DOMを理解する近道は、HTMLとDOMの違いを分けて見ることです。HTMLは書かれた元データ、DOMはブラウザーが作る操作対象です。JavaScriptはDOMを触ることで、ページの文字、色、表示順、部品の追加・削除を行います。

• HTMLは「書いたもの」
• DOMは「ブラウザーが作ったもの」
• JavaScriptは「DOMを動かすもの」

この3つを分けて考えると、「なぜHTMLを直していないのに画面が変わるのか」「なぜ要素を取ってきてから操作するのか」が見えやすくなります。最初は少し遠回りに見えても、DOMを知るとWebページの動きがかなり整理して見えるようになります。

3問クイズ

Q1. DOMは、主に何を表していますか？

Q2. JavaScriptがDOMを使うと、どんなことができますか？

Q3. HTMLとDOMは、同じものですか？

まとめ

DOMとは、Webページをブラウザーの中で操作しやすくした仕組みです。HTMLが元の材料、DOMがブラウザーの中でできた部品表、JavaScriptがそれを動かす担当、と覚えると理解しやすくなります。まずは「JavaScriptはDOMを触っている」と押さえるだけでも、Webページの動きがぐっと見えるようになります。