ブログ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では木の枝が伸びるような形(ツリー構造)で表現されています。

 

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

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

  1. 最上部に<html>タグがあり、その下に<head>タグと<body>タグがあります。
  2. <head>タグの下には<title>タグがあり、タイトルのテキストが含まれます。
  3. <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を持つ要素を取得します。

 

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

 

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

 

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

 

Element インターフェイス

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

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

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

 

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

 

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

 

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

 

Nodeインターフェイス

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

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

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

 

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

 

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

 

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

 

 

EventTargetインターフェイス

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

主要なメソッド:

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

 

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

 

 

Windowインターフェイス

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

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

まとめ

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

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

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