【初心者向け】DOM入門：Webページ操作の基本を３分でわかりやすく

WebサイトやWebアプリケーションを使っていると、ページの一部がクリックやスクロールに反応して変化することがあります。例えば、ボタンを押すと新しい情報が表示されたり、メニューが展開したり。これらの動的な変化は、Web開発の世界で「DOM操作」と呼ばれています。

この記事では、DOM（Document Object Model）という、Webページの構造を扱うための重要な概念について、初心者の方にもわかりやすく解説。DOMはWebページの見えない背骨のようなもので、HTMLやJavaScriptと深く関連しています。この記事では、DOMとは何か？DOMがどのように機能し、Webページにどのように影響を与えるのかを１からわかりやすく解説します。

参考　HTML CSS JavaScriptの違い・役割

このページで学べる内容

DOMとは何か？
DOMの役割と重要性
基本的なDOM操作
DOM操作のベストプラクティス

Webエンジニアを目指す方であれば知らないと恥ずかしい基本知識の１つです。是非最後までご覧ください。

DOMとは何か？
DOMの役割と重要性
基本的なDOM操作
1. 要素の選択と内容の変更
2. 実践的な例

DOMとは何か？

DOM（Document Object Model）とは、Webページの内容と構造をプログラムから扱うためのモデルです。

この概念を理解するために、まずはウェブページがどのように構築されているかを考えてみましょう。

Webページは、HTML（HyperText Markup Language）という言語で書かれています。HTMLは、Webページの骨組みを形成するタグ（例えば、<html>, <head>, <body>, <div>など）で構成されています。これらのタグは、ウェブページ上でのテキスト、画像、リンクなどの要素を定義します。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これはサンプルのパラグラフです。</p>
</body>
</html>

DOMは、このHTML文書をツリー構造、つまり階層的な形で表現します。

このツリー構造では、各HTMLタグは「ノード」として表され、これらのノードは親子関係を持ちます。例えば、<body>タグの中に<div>タグがある場合、<div>は<body>の子ノードとなります。

DOMの役割と重要性

DOMは、Web開発において中心的な役割を果たします。

ここでは、より具体的にDOMを扱うこと・理解することの重要性をいくつかご説明します。

インタラクティブなWebページの実現

DOMを理解・適切に操作すること、開発者はユーザーのアクション（クリック、スクロール、キーボード入力など）に応じてWebページを動的に更新することが可能になります。

例えば、フォームに入力されたデータに基づいて結果を表示したり、ボタンをクリックすることで新しいセクションを表示させたりすることが可能です。

ページ内容の動的な変更

JavaScriptを使用してDOMを操作することで、ページのロード後にもコンテンツを変更できます。

つまり、ページ全体をリロードすることなく、特定の要素だけを更新することができるため、効率的かつスムーズなユーザーエクスペリエンスを提供できます。

アクセシビリティとSEO

適切に構築されたDOMは、Webサイトのアクセシビリティ（利用しやすさ）を向上させます。加えて、検索エンジン最適化（SEO）にも寄与します。構造化されたDOMは、検索エンジンによるページの解析を容易にし、結果として検索順位の向上につながるためです。

現代のWebサイト・アプリケーションはDOMを利用して動的な画面を実装するのが主流。したがって、Web系エンジニアを目指す方にとってDOMの理解は必要不可欠だと言えるでしょう。

参考　静的コンテンツ/動的コンテンツとは？

基本的なDOM操作

ここからは、基本的なDOM操作の方法と、それを使った具体的な例を紹介します。

まず、以下のようなシンプルなHTMLページを考えます。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <h1 id="header">こんにちは、世界！</h1>
    <button id="changeTextButton">テキストを変更</button>
</body>
</html>

このHTMLには、h1タグによる見出しと、buttonタグによるボタンがあります。それぞれには、DOM操作で使うためのid属性が付けられています。

要素の選択と内容の変更

JavaScriptを使って、上記のHTMLの要素を選択し、内容を変更する方法を示します。

getElementById: IDを使って要素を選択し、textContentプロパティで内容を変更します。

document.getElementById('changeTextButton').addEventListener('click', function() {
    var headerElement = document.getElementById('header');
    headerElement.textContent = '新しいメッセージ';
});

このコードは、ボタン（changeTextButton）がクリックされたとき、見出し（header）のテキストを「新しいメッセージ」に変更します。

以下のコードをコピーし、HTMLファイル形式で保存→ブラウザで実行しボタンを押下すると実際の画面遷移のイメージをご確認いただけます。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <h1 id="header">こんにちは、世界！</h1>
    <button id="changeTextButton">テキストを変更</button>
</body>
</html>
<script>
    document.getElementById('changeTextButton').addEventListener('click', function() {
    var headerElement = document.getElementById('header');
    headerElement.textContent = '新しいメッセージ';
});
</script>

要するに、DOMのノードを指定して、そのノードに対して何らかの操作を行っている！ということが理解できればOKです。

実践的な例

実際のWeb開発では、複数のDOM操作を組み合わせて使用します。以下に、ユーザーの入力を受け取り、それに基づいてページの内容を更新する例を示します。

<!DOCTYPE html>
<html>
<head>
    <title>インタラクティブなページ</title>
</head>
<body>
    <input type="text" id="inputField" placeholder="名前を入力してください">
    <button id="submitButton">送信</button>
    <p id="greetingText">こんにちは、ゲスト！</p>
</body>
</html>
<script>
document.getElementById('submitButton').addEventListener('click', function() {
    var name = document.getElementById('inputField').value;
    var greeting = 'こんにちは、' + name + 'さん！';
    document.getElementById('greetingText').textContent = greeting;
});
</script>

この例では、ユーザーがテキストフィールド（inputField）に名前を入力し、送信ボタン（submitButton）をクリックすると、greetingTextのパラグラフの内容がその名前に基づいて更新されます。

このように、DOMを利用すれば基本的にはWebページ内のどの部分（＝要素）に対しても動的に表示や動きを変更することが可能です。JavaScriptを利用してできることがグッと広がります。

まとめ　DOMとは何か？

文書オブジェクトモデル（Document Object Model）
- HTMLやXML文書のプログラミングインターフェース。
ツリー構造
- Webページを親子関係を持つノード（要素）の集合体として表現。
JavaScriptとの連携
- DOMを通じて、Webページの内容やスタイルを動的に変更可能。
インタラクティブなウェブ体験の実現
- ユーザーのアクションに応じてページの一部を更新することができる。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <h1 id="header">こんにちは、世界！</h1>
    <button id="changeTextButton">テキストを変更</button>
</body>
</html>
<script>
    document.getElementById('changeTextButton').addEventListener('click', function() {
    var headerElement = document.getElementById('header');
    headerElement.textContent = '新しいメッセージ';
});
</script>