JavaScriptのDOMとは？基本概念と操作の流れを解説

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptでウェブページの内容を変えたり、ボタンを押したときに何か動作させたりするにはどうすればいいんですか？」

先生

「それには、JavaScriptのDOM操作という技術を使います。DOMを理解すれば、ウェブページを自由に操作できるようになりますよ。」

生徒

「DOMって何ですか？難しそうな言葉ですね...」

先生

「確かに最初は難しく感じるかもしれませんが、実はとてもシンプルな考え方なんです。まずはDOMの基本から一緒に学んでいきましょう！」

DOMとは何か？

DOMとは何か？" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

DOMとは何か？

DOM（ドム）とは、Document Object Modelの略称です。日本語に訳すと「文書オブジェクトモデル」という意味になります。

もう少しわかりやすく説明すると、DOMとはウェブページをJavaScriptから操作できるようにするための仕組みのことです。HTMLで書かれたウェブページを、JavaScriptが理解できる形に変換して、プログラムから自由に操作できるようにしてくれます。

身近な例えで理解しよう

DOMを身近なもので例えるなら、「家の設計図」のようなものです。

HTMLは、家を建てる設計図そのもの
DOMは、その設計図をプログラムが読み取れる形にしたもの
JavaScriptは、その設計図を見ながら家の中を改装したり、家具を配置したりする作業員

つまり、JavaScriptがウェブページの内容を変更したり、新しい要素を追加したりするときは、必ずDOMを通して行うということです。

DOMの構造を理解しよう

DOMの構造を理解しよう" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

DOMの構造を理解しよう

DOMは、ウェブページを木構造（ツリー構造）として表現します。これを「DOMツリー」と呼びます。

HTMLの例


<!DOCTYPE html>
<html>
<head>
    <title>私のページ</title>
</head>
<body>
    <h1>こんにちは</h1>
    <p>これはサンプルです。</p>
</body>
</html>

この簡単なHTMLは、DOMでは次のような木構造として表現されます。

html（根っこ）
- head
  - title
    - 「私のページ」（テキスト）
- body
  - h1
    - 「こんにちは」（テキスト）
  - p
    - 「これはサンプルです。」（テキスト）

ポイント：HTMLの各タグ（要素）が、DOMでは「ノード」という単位で管理されています。親子関係や兄弟関係で繋がっているイメージです。

DOM操作の基本的な流れ

DOM操作の基本的な流れ" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

DOM操作の基本的な流れ

JavaScriptでDOM操作を行うときは、基本的に次の流れで処理を進めます。

ステップ1：要素を取得する

まず、操作したいHTML要素をJavaScriptで取得します。これにはdocument.getElementById()やdocument.querySelector()などのメソッドを使います。

ステップ2：要素を操作する

取得した要素に対して、テキストを変更したり、スタイルを変更したり、新しい要素を追加したりします。

ステップ3：結果が画面に反映される

JavaScriptでDOMを変更すると、その変更が自動的にブラウザの画面に反映されます。

実際にDOM操作をしてみよう

実際にDOM操作をしてみよう" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

実際にDOM操作をしてみよう

それでは、実際に簡単なDOM操作のコードを見てみましょう。

HTMLの準備


<!DOCTYPE html>
<html>
<head>
    <title>DOM操作の練習</title>
</head>
<body>
    <h1 id="title">元のタイトル</h1>
    <button id="changeButton">タイトルを変更</button>
    
    <script src="script.js"></script>
</body>
</html>

JavaScriptのコード


// ボタン要素を取得
const button = document.getElementById('changeButton');

// ボタンがクリックされたときの処理
button.addEventListener('click', function() {
    // h1要素を取得
    const title = document.getElementById('title');
    
    // テキストを変更
    title.textContent = '新しいタイトル';
});

コードの解説

このコードでは、次のようなDOM操作を行っています。

document.getElementById('changeButton')で、ボタン要素を取得
addEventListenerで、ボタンがクリックされたときに実行する処理を登録
ボタンがクリックされたら、getElementById('title')でh1要素を取得
textContentプロパティを使って、テキストを「新しいタイトル」に変更

結果：ボタンをクリックすると、「元のタイトル」が「新しいタイトル」に変わります。

よく使うDOM操作のメソッド

よく使うDOM操作のメソッド" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

よく使うDOM操作のメソッド

JavaScriptでDOM操作を行うときに、よく使われるメソッドをいくつか紹介します。

要素を取得するメソッド

メソッド	説明
`getElementById()`	ID属性で要素を取得
`querySelector()`	CSSセレクタで最初の要素を取得
`querySelectorAll()`	CSSセレクタで全ての要素を取得

要素を操作するプロパティ

プロパティ	説明
`textContent`	要素のテキスト内容を取得・変更
`innerHTML`	要素のHTML内容を取得・変更
`style`	要素のスタイル（CSS）を変更

スタイルを変更する例

スタイルを変更する例" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

スタイルを変更する例

DOMを使えば、要素の見た目（スタイル）も変更できます。


<!DOCTYPE html>
<html>
<head>
    <title>スタイル変更</title>
</head>
<body>
    <p id="text">このテキストの色が変わります</p>
    <button id="colorButton">色を変更</button>
    
    <script>
        const colorButton = document.getElementById('colorButton');
        
        colorButton.addEventListener('click', function() {
            const text = document.getElementById('text');
            text.style.color = 'red';
            text.style.fontSize = '24px';
        });
    </script>
</body>
</html>

このコードでは、ボタンをクリックすると、段落のテキストが赤色になり、文字サイズが大きくなります。styleプロパティを使うことで、CSSのプロパティをJavaScriptから直接変更できます。

注意：CSSプロパティ名は、JavaScriptではfont-sizeではなくfontSizeのようにキャメルケース（単語の最初を大文字にする記法）で書きます。

新しい要素を追加する

新しい要素を追加する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

新しい要素を追加する

DOMでは、既存の要素を変更するだけでなく、新しい要素を作成してページに追加することもできます。


// 新しいp要素を作成
const newParagraph = document.createElement('p');

// テキストを設定
newParagraph.textContent = 'これは新しく追加された段落です';

// body要素に追加
document.body.appendChild(newParagraph);

実行結果


ページの最後に「これは新しく追加された段落です」という段落が表示されます。

このコードでは、次の手順で新しい要素を追加しています。

document.createElement('p')で新しいp要素を作成
textContentでテキストを設定
appendChild()でbody要素の子要素として追加

DOMを使う際の注意点

DOMを使う際の注意点" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

DOMを使う際の注意点

JavaScriptの読み込み位置

JavaScriptでDOM操作を行うコードは、HTMLが読み込まれた後に実行する必要があります。そのため、scriptタグは通常、bodyタグの終わり近くに配置します。もしくは、次のようにDOMContentLoadedイベントを使います。


document.addEventListener('DOMContentLoaded', function() {
    // ここにDOM操作のコードを書く
    const title = document.getElementById('title');
    title.textContent = '変更されたタイトル';
});

この方法を使えば、scriptタグをhead内に配置しても、HTMLが完全に読み込まれてからコードが実行されるため安全です。

存在しない要素を取得しようとした場合

もし指定したIDの要素が存在しない場合、getElementById()はnullを返します。そのため、要素が取得できたかどうかを確認してから操作するのが安全です。


const element = document.getElementById('myElement');

if (element) {
    // 要素が存在する場合のみ操作
    element.textContent = '変更しました';
} else {
    console.log('要素が見つかりませんでした');
}

現役テックリードが直接指導【JavaScript実践実践セミナー】

Vanilla JSから始めるモダンJavaScript実践講座｜ES6+とDOM操作の完全理解

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

ブラウザを操る。モダンJavaScript（ES6+）の基礎とDOM操作の真髄。

本講座では、ReactやVue.jsといったフレームワークの土台となるJavaScriptの本質を学びます。ライブラリに頼らず、ブラウザ上で何が起きているのかを理解することで、デバッグ能力と実装スピードを劇的に向上させます。最新のES6以降のモダン記法や、実務で必須となるイベント駆動設計を60分で濃縮体験します。