DOMとは何か？

ブログblog

DOMとは何か？

Writer： otsubo　更新日：2024/06/25

こんにちは、デジナーレ福岡オフィスの大坪です。

JavaScriptは様々な環境で利用することができますが、JavaScriptでウェブページを開発する上で、内容や見た目をプログラムで操作できることは非常に便利です。この操作を可能にするのが「DOM」です。ここでは、DOMが何か、どのように使われるのかについて説明します。

DOMとは何か？

DOMとはドキュメントオブジェクトモデル (Document Object Model)の略で、HTMLやXMLなどのマークアップ言語で作成されたドキュメントにアクセスするための仕組みになっています。
JavaScript 等の言語では直接HTMLを扱うことができないため、DOMを使い、スクリプト言語を用いてブラウザに描画された内容を抽出、追加や削除を行います。DOMはその手段を提供するAPIなのです。

また、DOMでは名前のとおり、ウェブサイトを作成するために必要なドキュメントに含まれる要素や属性、テキストをそれぞれオブジェクトにまとめられています。このドキュメントを構成する要素や属性らのオブジェクトのことをノードと呼んでいます。

ドキュメントを構成する要素をノードと呼び、オブジェクトの種類に応じて要素ノード、属性ノード、テキストノードと呼ばれています。

HTMLやXML文書をツリー状の構造で表現される

ウェブページを作るときに使うHTMLやXMLは、文字やタグで書かれています。このHTMLやXMLを、DOMでは木の枝が伸びるような形（ツリー構造）で表現されています。

たとえば以下のようなコードがあるとします。

<!DOCTYPE html>

<html>

<head>

<title>ページのタイトル</title>

</head>

<body>

<p>これは段落です。</p>

</body>

</html>

このコードをDOMのツリー構造で表すと、次のようになります

最上部に<html>タグがあり、その下に<head>タグと<body>タグがあります。
<head>タグの下には<title>タグがあり、タイトルのテキストが含まれます。
<body>タグの下には<h1>タグ（見出し）と<p>タグ（段落）があります。

このように、DOMはウェブページ全体を一つの大きなツリーとして整理し、それぞれのノードを分かりやすく表現しています。また、このDOMツリー上の上下関係は以下のように呼ばれることもあります。

ルートノード: ツリーの最上部に位置するノード。(<html>タグ)
親ノード：上下関係にあるノード。ルートノードに近いノードのことを親ノードと呼ぶ。(<head>タグ、<body>タグ)
子ノード：ルートノードから遠いノード、親ノードに直接つながっているノード(<head>タグの下の<title>タグ。<body>タグの下の<h1>タグ、<p>タグ)
兄弟ノード：同じ親ノードを持つノード同士。(<body>タグの下の<h1>タグ、<p>タグ)

DOM のインターフェイス

DOMの基本概念を知ったところで、DOMの中でよく使用されるインターフェイスを見ていきましょう。

Document インターフェイス

Document インターフェイスは、ウェブページ全体を表すオブジェクトであり、DOMツリーのルート（最上位）に位置します。Document インターフェイスを使うことで、ページ内の要素にアクセスしたり、新しい要素を作成したりすることができます。

主要なメソッドとプロパティ：

document.getElementById(id)：指定されたIDを持つ要素を取得します。

// IDが"myElement"の要素を取得

const elementById = document.getElementById("myElement");

// 取得した要素をコンソールに表示

console.log(elementById);

document.querySelector(selector)：指定されたCSSセレクタに一致する最初の要素を取得します。

// 最初の <p> 要素を取得

const firstParagraph = document.querySelector("p");

// 取得した要素をコンソールに表示

console.log(firstParagraph);

document.createElement(tagName)：指定されたタグ名の新しい要素を作成します。

// 新しい <div> 要素を作成

const newDiv = document.createElement("div");

// 作成した <div> 要素にテキストを追加

newDiv.textContent = "新しいDIVです";

// 作成した <div> 要素を <body> 要素の子要素として追加

document.body.appendChild(newDiv);

document.body：ページの <body> 要素にアクセスします。

// <body> 要素にアクセスして新しい内容を追加

document.body.innerHTML += "<p>新しい段落が追加されました。</p>";

Element インターフェイス

Element インターフェイスは、HTMLやXML文書の個々の要素を表します。これにより、要素の属性や内容を操作することができます。

主要なメソッドとプロパティ：

element.innerHTML：要素のHTMLコンテンツを取得または設定します。

// 最初の <div> 要素を取得

const divElement = document.querySelector("div");

// <div> 要素のHTMLコンテンツを設定

divElement.innerHTML = "<p>新しい段落が追加されました。</p>";

element.setAttribute(name, value)：要素に新しい属性を追加または変更します。

// 最初の <h1> 要素を取得

const heading = document.querySelector("h1");

// <h1> 要素にクラス属性を追加

heading.setAttribute("class", "main-heading");

element.getAttribute(name)：要素の属性の値を取得します。

// 最初の <h1> 要素を取得

const heading = document.querySelector("h1");

// <h1> 要素のクラス属性の値を取得

const className = heading.getAttribute("class");

console.log(className); // 取得したクラス属性の値をコンソールに表示

element.appendChild(child)：要素に新しい子要素を追加します。

// 新しい <span> 要素を作成

const newSpan = document.createElement("span");

// <span> 要素にテキストを追加

newSpan.textContent = "新しいスパン要素です";

// 最初の <div> 要素を取得

const divElement = document.querySelector("div");

// 作成した <span> 要素を <div> 要素の子要素として追加

divElement.appendChild(newSpan);

Nodeインターフェイス

Node インターフェイスは、DOMツリー内のすべてのオブジェクトの基本となるインターフェイスです。Element インターフェイスも Node インターフェイスから継承しています。

主要なメソッドとプロパティ：

node.parentNode：現在のノードの親ノードを返します。

// 最初の <p> 要素を取得

const paragraph = document.querySelector("p");

// <p> 要素の親ノードを取得

const parentElement = paragraph.parentNode;

console.log(parentElement); // 親ノードをコンソールに表示

node.childNodes：現在のノードのすべての子ノードのリストを返します。

// 最初の <div> 要素を取得

const divElement = document.querySelector("div");

// <div> 要素のすべての子ノードを取得

const childNodes = divElement.childNodes;

console.log(childNodes); // 子ノードのリストをコンソールに表示

node.removeChild(child)：指定された子ノードを削除します。

// 親要素を取得

const parent = document.querySelector(".parent");

// 子要素を取得

const child = document.querySelector(".child");

// 親要素から子要素を削除

parent.removeChild(child);

node.textContent：ノードのテキストコンテンツを取得または設定します。

// 最初の <p> 要素を取得

const paragraph = document.querySelector("p");

// <p> 要素のテキストコンテンツを設定

paragraph.textContent = "新しいテキストコンテンツ";

// <p> 要素のテキストコンテンツを取得

const text = paragraph.textContent;

console.log(text); // テキストコンテンツをコンソールに表示

EventTargetインターフェイス

EventTarget インターフェイスは、DOM内でイベントを処理するための基本的なインターフェイスです。Element や Document も EventTarget インターフェイスを実装しています。

主要なメソッド：

addEventListener(type, listener)：指定されたタイプのイベントリスナーを登録します。

const button = document.querySelector("button");

button.addEventListener("click", () => {

alert("ボタンがクリックされました！");

});

removeEventListener(type, listener)：指定されたタイプのイベントリスナーを削除します。

const handleClick = () => {

alert("ボタンがクリックされました！");

};

const button = document.querySelector("button");

button.addEventListener("click", handleClick);

// イベントリスナーを削除

button.removeEventListener("click", handleClick);

Windowインターフェイス

window オブジェクトは、ブラウザのウィンドウ全体を表します。このオブジェクトには、ブラウザのウィンドウに関する情報や、表示されているドキュメントにアクセスするためのプロパティやメソッドが含まれています。

主要なプロパティとメソッド：

window.document: 現在表示されているウェブページ（DOMツリー全体）にアクセスする。

// ページのタイトルを取得

console.log(window.document.title);

window.alert(message): 指定したメッセージを表示するアラートダイアログを表示します。ユーザーが「OK」をクリックするまでページの操作を停止します。

// アラートダイアログを表示

window.alert("Hello!");

window.setTimeout(function, milliseconds): 指定した時間（ミリ秒）後に指定した関数を一度だけ実行します。

// 3秒後にメッセージを表示

window.setTimeout(() => {

console.log("3秒が経過しました");

}, 3000);

window.setInterval(function, milliseconds): 指定した時間間隔（ミリ秒）ごとに指定した関数を繰り返し実行します。

// 1秒ごとにメッセージを表示

window.setInterval(() => {

console.log("1秒が経過しました");

}, 1000);

window.innerWidth: ブラウザウィンドウの表示可能な領域の幅をピクセル単位で返す。

// ウィンドウの幅を表示

console.log(`ウィンドウの幅: ${window.innerWidth}px`);

window.innerHeight: ブラウザウィンドウの表示可能な領域の高さをピクセル単位で返す。

// ウィンドウの幅を表示

console.log(`ウィンドウの幅: ${window.innerWidth}px`);

window.scrollTo(x, y): ページを指定された位置（x, y）にスクロールします。

// ページを垂直方向に500ピクセルスクロール

window.scrollTo(0, 500);

windowオブジェクトは省略可能
windowオブジェクトのプロパティにアクセスする時はwindow.○○と書きますが、実はwindowを省略することも可能です。
windowがどのようなプロパティを持っているかは覚える必要はないと思いますが、chrome devtoolのconsoleタブで確認することもできます。

つまり私たちが開発をしていく上でプログラムの実行結果を表示させたり、デバッグ等でよく使うは、console.log()は実はwindowオブジェクトのプロパティです。
なので本来はwindow.console.log()と書く事が出来ます。

まとめ

DOMは、ウェブページの構造をプログラムで操作するための強力なツールです。
Document、Element、Node、EventTarget などの主要なインターフェイスを通じて、開発者はウェブページの内容や構造を柔軟に制御することができます。

今回ご紹介したDOMの操作のメソッドはその豊富な機能のほんの一部に過ぎません。これらは覚えるというよりも実装の際に調べたり、都度都度調べていきさらに詳しい情報を探求していくことをお勧めします。DOMの理解を深めることは、最新のフレームワークやライブラリを効果的に活用する上でもきっと大切なはずです。

ぜひこれを機に公式ドキュメントなどもチェックしてみてください！

デザインシステムの世界【React】useEffectを使用するべき場所なのか

otsuboの
他の記事を読む

otsuboの記事一覧

スタッフブログ一覧

DOMとは何か？

DOMとは何か？

HTMLやXML文書をツリー状の構造で表現される

DOM のインターフェイス

Document インターフェイス

Element インターフェイス

Nodeインターフェイス

EventTargetインターフェイス

Windowインターフェイス

まとめ

otsuboの
他の記事を読む

関連タグ

デジナーレをもっと知るABOUT US

DOMとは何か？

DOMとは何か？

HTMLやXML文書をツリー状の構造で表現される

DOM のインターフェイス

Document インターフェイス

Element インターフェイス

Nodeインターフェイス

EventTargetインターフェイス

Windowインターフェイス

まとめ

otsuboの他の記事を読む

関連タグ

デジナーレをもっと知るABOUT US

otsuboの
他の記事を読む