基礎から学ぶJavaScript入門 90日コース | Webページを操作するDOM － Day 31：DOMとは

90日で身につけるJavaScript

2026.08.27

Day 31：DOMとは（前半）
DOMとは：Webページを“オブジェクトの木”として扱う仕組み
1. DOMを一言でいうと
2. HTML → DOM → 画面表示、という流れ
HTMLとJavaScriptの関係：役割分担を理解する
具体例で見る：シンプルなHTMLとDOMのイメージ
1. 例：とてもシンプルなHTML
JavaScriptからDOMに触れてみる：最初の一歩
1. <script> タグでJavaScriptをHTMLに組み込む
2. コードのポイント解説
DOMを“木構造”としてイメージする
1. 親子関係でつながった「ノード」の集まり
DOMとJavaScriptの関係を体感するミニテンプレート
Day 31 前半のまとめ
Day 31：DOMとは（後半）
DOMツリーを意識してHTMLを見る
1. DOMは「HTMLの構造をそのまま木にしたもの」です
2. 開発者ツールでDOMツリーを“目で見る”
document オブジェクト：DOMの“入口”
1. document は「ページ全体」を表すオブジェクトです
2. よく使う document のメソッド（入口だけ紹介）
HTMLとJavaScriptの関係を“動き”で理解する
1. 例：HTMLとJavaScriptがDOMを介してつながる最小構成
DOM操作の基本パターンを言葉で整理する
DOMとHTML・JavaScriptの関係を体感する練習テンプレート
Day 31 後半のまとめ

Day 31：DOMとは（前半）

「JavaScriptが“Webページそのもの”を触れるようになる仕組み」

Day 31からはいよいよ、 「Webページを直接操作する」世界 に入っていきます。

ここまで学んできたJavaScriptは、主に「データを扱う」「計算する」ことが中心でしたが、今日からは 「画面に表示されているHTMLを、JavaScriptで動かす」 という Web開発の核心部分に踏み込んでいきます。

その入口となる概念が DOM（Document Object Model） です。

DOMとは：Webページを“オブジェクトの木”として扱う仕組み

DOMを一言でいうと

DOMとは、

「ブラウザが、HTMLを“オブジェクトの木”として表現したもの」

です。

もう少しかみ砕くと、

ブラウザは、HTMLファイルを読み込みます
そのHTMLを、タグごとに分解して「要素」として扱います
それらの要素を、親子関係のある“木構造”として管理します
JavaScriptは、その“木構造”にアクセスして、要素を取得したり、書き換えたり、追加したりできます

この「HTMLをオブジェクトとして扱う仕組み」がDOMです。

HTML → DOM → 画面表示、という流れ

Webページが表示されるまでの流れを、ざっくり整理すると次のようになります。

ブラウザがHTMLファイルを読み込む
HTMLを解析して、DOM（オブジェクトの木）を作る
DOMをもとに、画面に要素を描画する
JavaScriptは、このDOMに対して操作を行う

つまり、JavaScriptが直接触っているのは「生のHTML文字列」ではなく、 ブラウザが作ったDOMという“オブジェクトの世界” なのです。

HTMLとJavaScriptの関係：役割分担を理解する

HTMLの役割：構造と意味を決める

HTMLは、Webページの 「骨組み」 を作る言語です。

見出し（<h1>〜<h6>）
段落（<p>）
リスト（<ul>, <li>）
ボタン（<button>）
入力フォーム（<input>, <form>）

などを使って、

「何がどこにあるのか」「それが何を意味するのか」

をブラウザに伝えます。

JavaScriptの役割：動きと振る舞いを決める

JavaScriptは、Webページの 「動き」 を作る言語です。

ボタンをクリックしたときに何かを起こす
入力された値をチェックする
新しい要素を追加する
既存のテキストを書き換える

などの「振る舞い」を、DOMを通して実現します。

HTMLとJavaScriptは“DOMを介して”つながっている

ここがとても重要なポイントです。

HTML：静的な構造と意味
JavaScript：動的な振る舞い
DOM：両者をつなぐ“橋”のような存在

JavaScriptは、DOMを通じてHTML要素にアクセスし、その内容や属性を変更することで、結果的に画面上の表示を変えています。

具体例で見る：シンプルなHTMLとDOMのイメージ

例：とてもシンプルなHTML

まずは、次のようなHTMLを考えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOMの基本例</title>
</head>
<body>
  <h1>こんにちは、DOM！</h1>
  <p>これはDOMの練習用ページです。</p>
  <button>メッセージを変更</button>
</body>
</html>

このHTMLには、

<h1> 見出し
<p> 段落
<button> ボタン

が含まれています。

ブラウザはこのHTMLを読み込んで、内部的に次のような「DOMツリー（木構造）」を作ります。

document（ページ全体）
- html 要素
  - head 要素
  - body 要素
    - h1 要素
    - p 要素
    - button 要素

JavaScriptは、この document からスタートして、 body → h1 → p → button といった要素にアクセスしていきます。

JavaScriptからDOMに触れてみる：最初の一歩

<script> タグでJavaScriptをHTMLに組み込む

HTMLとJavaScriptをつなぐには、 <script> タグを使います。

先ほどのHTMLに、JavaScriptを追加してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOMの基本例</title>
</head>
<body>
  <h1 id="title">こんにちは、DOM！</h1>
  <p id="message">これはDOMの練習用ページです。</p>
  <button id="changeButton">メッセージを変更</button>

  <script>
    // ここにJavaScriptを書きます

    // 1. DOMから要素を取得する
    const titleElement = document.getElementById('title');      // h1要素
    const messageElement = document.getElementById('message');  // p要素
    const buttonElement = document.getElementById('changeButton'); // button要素

    // 2. 取得した要素の内容をコンソールに表示してみます
    console.log('タイトルのテキスト:', titleElement.textContent);
    console.log('メッセージのテキスト:', messageElement.textContent);

    // 3. ボタンがクリックされたときに、メッセージを書き換える
    buttonElement.addEventListener('click', function () {
      // p要素のテキストを書き換えます
      messageElement.textContent = 'ボタンがクリックされました！メッセージを変更しました。';
    });
  </script>
</body>
</html>

コードのポイント解説

document.getElementById('title') → DOMから「idがtitleの要素」を取得しています。
textContent → 要素の中のテキストを表すプロパティです。
addEventListener('click', function () { ... }) → ボタンがクリックされたときに実行される処理を登録しています。

ここで重要なのは、

JavaScriptは、document オブジェクトを入口として、 HTML要素（DOMのノード）にアクセスしている

という点です。

DOMを“木構造”としてイメージする

親子関係でつながった「ノード」の集まり

DOMは、ノード（Node） と呼ばれる要素の集まりです。

document ノード（ページ全体）
html ノード
head ノード
body ノード
その中にある h1, p, button などのノード

これらは、親子関係でつながった「木構造」になっています。

イメージとしては、

document が「根っこ」
html が「幹」
head と body が「太い枝」
その先にある h1, p, button が「葉っぱ」

のような感じです。

JavaScriptは、この木の中から特定の葉っぱ（要素）を見つけて、その葉っぱの色（テキスト）を変えたり、新しい葉っぱを生やしたり（要素を追加したり）します。

DOMとJavaScriptの関係を体感するミニテンプレート

Day 31前半の理解を深めるために、ブラウザで試せる最小限のテンプレートを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 31 前半：DOMとは</title>
</head>
<body>
  <h1 id="title">DOMの世界へようこそ</h1>
  <p id="message">このテキストは、JavaScriptから変更できます。</p>
  <button id="changeButton">メッセージを変更する</button>

  <script>
    // DOMから要素を取得します
    const titleElement = document.getElementById('title');
    const messageElement = document.getElementById('message');
    const buttonElement = document.getElementById('changeButton');

    // コンソールに現在のテキストを表示してみます
    console.log('現在のタイトル:', titleElement.textContent);
    console.log('現在のメッセージ:', messageElement.textContent);

    // ボタンがクリックされたときの処理を登録します
    buttonElement.addEventListener('click', function () {
      // タイトルとメッセージを書き換えます
      titleElement.textContent = 'DOMを操作しました！';
      messageElement.textContent = 'JavaScriptからDOMを通じてテキストを変更しました。';
    });
  </script>
</body>
</html>

このテンプレートをブラウザで開き、

画面に表示されているテキストを確認する
ボタンをクリックして、テキストが変わる様子を見る
開発者ツールのコンソールを開いて、ログを確認する

ことで、

「HTMLで書いたものが、DOMとしてブラウザに読み込まれ、 JavaScriptから操作されている」

という流れを、目で見て体感することができます。

Day 31 前半のまとめ

Day 31前半では、

DOMとは「ブラウザがHTMLをオブジェクトの木として表現したもの」であること
HTMLが「構造と意味」を担当し、JavaScriptが「動きと振る舞い」を担当し、 DOMがその橋渡しをしていること
document.getElementById() などを使って、 JavaScriptからDOM要素にアクセスし、テキストを書き換えられること

を確認しました。

Day 31：DOMとは（後半）

「“画面の裏側”を意識しながらDOMを触ってみる」

Day 31後半では、前半で学んだ

DOMとは何か
HTMLとJavaScriptの関係

を、もう一歩深く「実際のブラウザの動き」と結びつけて理解していきます。ここでは、

DOMツリーを意識してHTMLを見る
document オブジェクトの役割を知る
JavaScriptからDOMを操作する基本パターンを体験する

という流れで、WebページとJavaScriptのつながりを“手触り”として掴んでいきます。

DOMツリーを意識してHTMLを見る

DOMは「HTMLの構造をそのまま木にしたもの」です

次のようなシンプルなHTMLを例にします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOMツリーのイメージ</title>
</head>
<body>
  <h1>DOMツリーの練習</h1>
  <p>これはDOMツリーを意識するためのサンプルです。</p>
  <div>
    <span>中身のテキスト</span>
  </div>
</body>
</html>

このHTMLを、DOMの視点で見ると次のような「木構造」になります。

document
- html
  - head
    - meta
    - title
  - body
    - h1
    - p
    - div
      - span

ここで意識してほしいのは、

すべての要素が「親」と「子」の関係でつながっていること
JavaScriptは、この木の中から特定の要素を探して操作すること

です。

開発者ツールでDOMツリーを“目で見る”

ブラウザ（Chromeなど）の開発者ツールを開くと、

「Elements」タブ（または「要素」タブ）に、HTML構造が表示されます
これは、ブラウザが内部で持っているDOMツリーを、人間向けに見せているものです

要素をクリックすると、対応する部分が画面上でハイライトされます。

「画面に見えているもの」と「DOMツリーの要素」が 1対1で対応している

という感覚を持てると、 JavaScriptでDOMを操作するときのイメージがぐっとクリアになります。

document オブジェクト：DOMの“入口”

document は「ページ全体」を表すオブジェクトです

JavaScriptからDOMにアクセスするとき、必ず登場するのが document です。

// ページ全体を表すdocumentオブジェクト
console.log(document);

// ページ全体を表すdocumentオブジェクト
console.log(document);

JavaScript

document は、

現在表示されているWebページ全体を表す
DOMツリーの「根っこ」にあたる存在
要素を探したり、追加したりするためのメソッドをたくさん持っている

という、とても重要なオブジェクトです。

よく使う document のメソッド（入口だけ紹介）

初心者向けに、まずは次の3つを覚えておくとよいです。

// idで要素を取得する
document.getElementById('someId');

// タグ名で要素を取得する（複数）
document.getElementsByTagName('p');

// CSSセレクタで要素を取得する（1つ）
document.querySelector('.className');

// idで要素を取得する
document.getElementById('someId');

// タグ名で要素を取得する（複数）
document.getElementsByTagName('p');

// CSSセレクタで要素を取得する（1つ）
document.querySelector('.className');

JavaScript

Day 31では「DOMとは何か」が主役なので、これらのメソッドは「こういう入口があるんだな」くらいで大丈夫です。

HTMLとJavaScriptの関係を“動き”で理解する

例：HTMLとJavaScriptがDOMを介してつながる最小構成

次のHTML＋JavaScriptを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLとJavaScriptの関係</title>
</head>
<body>
  <!-- 画面に表示されるHTML要素 -->
  <h1 id="title">HTMLとJavaScriptの関係</h1>
  <p id="description">このテキストは、JavaScriptから変更できます。</p>
  <button id="changeButton">説明文を変更する</button>

  <!-- JavaScriptを組み込む -->
  <script>
    // 1. DOMから要素を取得します（HTMLとJavaScriptの“接点”）
    const titleElement = document.getElementById('title');
    const descriptionElement = document.getElementById('description');
    const buttonElement = document.getElementById('changeButton');

    // 2. 現在のテキストをコンソールに表示してみます
    console.log('タイトル:', titleElement.textContent);
    console.log('説明文:', descriptionElement.textContent);

    // 3. ボタンがクリックされたときに説明文を書き換えます
    buttonElement.addEventListener('click', function () {
      // DOMを通じてHTMLの中身を変更しています
      descriptionElement.textContent = 'JavaScriptがDOMを通じて、この説明文を書き換えました。';
    });
  </script>
</body>
</html>

ここで起きていることを、ステップごとに整理します。

ステップ1：ブラウザがHTMLを読み込む

ブラウザはHTMLを読み込み、DOMツリーを作ります。
id="title" の <h1> 要素、id="description" の <p> 要素、id="changeButton" の <button> 要素がDOMに登録されます。

ステップ2：JavaScriptが `document` から要素を取得する

const titleElement = document.getElementById('title');

const titleElement = document.getElementById('title');

JavaScript

document は「ページ全体」を表すオブジェクトです。
getElementById('title') は、「idがtitleの要素」をDOMツリーから探して返します。
返ってきたものは「DOM要素オブジェクト」であり、その中に textContent などのプロパティが含まれています。

ステップ3：DOM要素のプロパティを変更する

descriptionElement.textContent = 'JavaScriptがDOMを通じて、この説明文を書き換えました。';

descriptionElement.textContent = 'JavaScriptがDOMを通じて、この説明文を書き換えました。';

JavaScript

textContent は、その要素の「中身のテキスト」を表します。
このプロパティを書き換えることで、ブラウザは「DOMが変わった」と認識し、画面の表示を更新します。

つまり、JavaScriptは「DOMの状態」を変えていて、その結果として「画面の表示」が変わっているのです。

DOM操作の基本パターンを言葉で整理する

パターン1：要素を「見つける」

document からスタートする
getElementById や querySelector などで、特定の要素を探す
見つかった要素を変数に入れておく

const messageElement = document.getElementById('message');

const messageElement = document.getElementById('message');

JavaScript

パターン2：要素の「中身」を読む・書く

読む：messageElement.textContent
書く：messageElement.textContent = '新しいテキスト';

console.log(messageElement.textContent); // 現在のテキストを確認
messageElement.textContent = '書き換えました'; // 新しいテキストに変更

console.log(messageElement.textContent); // 現在のテキストを確認
messageElement.textContent = '書き換えました'; // 新しいテキストに変更

JavaScript

パターン3：ユーザーの操作に応じてDOMを変える

ボタンや入力欄などの要素を取得する
addEventListener でイベント（クリックなど）を監視する
イベントが起きたときに、DOMを変更する処理を実行する

buttonElement.addEventListener('click', function () {
  messageElement.textContent = 'ボタンがクリックされたので、メッセージを変更しました。';
});

buttonElement.addEventListener('click', function () {
  messageElement.textContent = 'ボタンがクリックされたので、メッセージを変更しました。';
});

JavaScript

この3つのパターンが、「HTMLとJavaScriptがDOMを通じてつながる」基本的な流れです。

DOMとHTML・JavaScriptの関係を体感する練習テンプレート

Day 31後半の内容を、ブラウザで試せる形にまとめたテンプレートです。実際に開いて、DOMとJavaScriptの関係を確認してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 31 後半：DOMとHTMLとJavaScriptの関係 練習テンプレート</title>
</head>
<body>
  <h1 id="title">DOMとHTMLとJavaScriptの関係</h1>
  <p id="message">このメッセージは、JavaScriptから変更できます。</p>
  <button id="changeButton">メッセージを変更する</button>

  <script>
    // DOMの入口となるdocumentオブジェクトを確認してみます
    console.log('documentオブジェクト:', document);

    // DOMから要素を取得します
    const titleElement = document.getElementById('title');
    const messageElement = document.getElementById('message');
    const buttonElement = document.getElementById('changeButton');

    // 現在のテキストをコンソールに表示します
    console.log('現在のタイトル:', titleElement.textContent);
    console.log('現在のメッセージ:', messageElement.textContent);

    // ボタンがクリックされたときにDOMを変更します
    buttonElement.addEventListener('click', function () {
      // タイトルを書き換えます
      titleElement.textContent = 'DOMを通じてタイトルを変更しました';

      // メッセージを書き換えます
      messageElement.textContent = 'JavaScriptがDOMを操作して、このテキストを変更しました。';

      // コンソールにもログを出します
      console.log('ボタンがクリックされました。DOMを変更しました。');
    });
  </script>
</body>
</html>

このテンプレートで、

画面に表示されているHTML
開発者ツールの「Elements」タブに表示されるDOM
コンソールに表示されるログ
ボタンをクリックしたときのテキストの変化

をセットで観察すると、

「HTML → DOM → JavaScript → DOM → 画面」

という流れが、かなりはっきり見えてくるはずです。

Day 31 後半のまとめ

Day 31後半では、

DOMツリーを「親子関係の木構造」として意識すること
document オブジェクトが、DOMの入口であり、 HTMLとJavaScriptをつなぐ“ハブ”のような存在であること
JavaScriptがDOMを通じて要素を取得し、 textContent などのプロパティを変更することで、画面の表示を変えていること

を確認しました。

DOMは、 「JavaScriptがWebページそのものを触れるようにするための仕組み」 です。

この仕組みを理解しておくと、

ボタンで表示を切り替える
入力内容を画面に反映する
リストを動的に増やす・減らす

といった、実際のWebアプリに近い動きが、ぐっとイメージしやすくなります。

次のDayでは、 DOM要素の取得方法や、要素の追加・削除、イベントとの組み合わせなどを通じて、「動くWebページ」を少しずつ自分の手で作っていくことになりますので、今日のテンプレートを何度か試しながら、 DOMとHTML・JavaScriptの関係を自分の中に定着させていってください。

@lifehacker

挫折しないで楽しく学べるプログラミング。プログラミングを学ぶなら基礎から学べるMONO365 -LifeHack-。「覚える」ではなく「使える」ようになるプログラミング学習。

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、Web制作、例題や多くのサンプルコードで実践的な使い方などを、日本一詳しくわかりやすく解説するサイト。
更には、中級者や上級者が実務で使うプログラミングコードや考え方、設計手法、チーム開発、コードレビューなどの実践的な内容も学ぶことができます。

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Day 31：DOMとは（前半）

DOMとは：Webページを“オブジェクトの木”として扱う仕組み

DOMを一言でいうと

HTML → DOM → 画面表示、という流れ

HTMLとJavaScriptの関係：役割分担を理解する

HTMLの役割：構造と意味を決める

JavaScriptの役割：動きと振る舞いを決める

HTMLとJavaScriptは“DOMを介して”つながっている

具体例で見る：シンプルなHTMLとDOMのイメージ

例：とてもシンプルなHTML

JavaScriptからDOMに触れてみる：最初の一歩

<script> タグでJavaScriptをHTMLに組み込む

コードのポイント解説

DOMを“木構造”としてイメージする

親子関係でつながった「ノード」の集まり

DOMとJavaScriptの関係を体感するミニテンプレート

Day 31 前半のまとめ

Day 31：DOMとは（後半）

DOMツリーを意識してHTMLを見る

DOMは「HTMLの構造をそのまま木にしたもの」です

開発者ツールでDOMツリーを“目で見る”

document オブジェクト：DOMの“入口”

document は「ページ全体」を表すオブジェクトです

よく使う document のメソッド（入口だけ紹介）

HTMLとJavaScriptの関係を“動き”で理解する

例：HTMLとJavaScriptがDOMを介してつながる最小構成

ステップ1：ブラウザがHTMLを読み込む

ステップ2：JavaScriptが document から要素を取得する

ステップ3：DOM要素のプロパティを変更する

DOM操作の基本パターンを言葉で整理する

パターン1：要素を「見つける」

パターン2：要素の「中身」を読む・書く

パターン3：ユーザーの操作に応じてDOMを変える

DOMとHTML・JavaScriptの関係を体感する練習テンプレート

Day 31 後半のまとめ

広告ブロッカーが検出されました

ステップ2：JavaScriptが `document` から要素を取得する