1. はじめに

DOMやDOM操作という言葉を耳にするたび、
「DOMってなんとなくイメージはついているけど、自分の言葉で説明できないな」
「DOMを操作するって具体的にどういう行為のことを指しているのだろう？」
と、曖昧な理解のまま聞き流してしまっていました。

DOMが何を指しているのか、DOM操作とは何なのか、について説明できるようになるため、DOMについてまとめます。

2. DOMとは

DOMとは ドキュメントオブジェクトモデル (Document Object Model) の略です。

DOMとは何か調べてみると、
「Webページの要素やコンテンツをツリー構造で表現したデータモデルのこと」
「HTMLやXMLドキュメントなどのマークアップ言語を、JavaScriptなどのプログラミング言語からアクセスできるようにするためのAPI（アプリケーションプログラミングインターフェース）」
というような説明が出てきます。

ツリー構造のモデル？API？どっちなんだろう？？
と混乱してしまったのですが、DOMという言葉は、この2つの意味を含んでいるということです。

以下、「モデルとしてのDOM」と「APIとしてのDOM」に分けて説明しますが、両者を合わせてDOMという概念であり、厳密に分けられているものではありません

2-1. モデルとしてのDOM

モデルとしてのDOMとは、HTMLやXMLのドキュメントをオブジェクトとして扱うデータモデルです。
ドキュメントをどういう構造にして、どう操作するのかを定義したものです。

モデルとしてのDOMは、ドキュメントを操作するためにドキュメントをツリー構造（階層構造）として表現すると定義しています。
このツリー構造をDOMツリーと呼びます。

このDOMの仕様自体は、概念として定義されているため実体はありません。
実際のブラウザは、この仕様に基づいてDOMツリーをメモリ上に構築します。

例えば、以下のようなHTMLドキュメントがあります。

<html>
  <head>
    <title>DOMとは？</title>
  </head>
  <body>
    <h1>Hello, DOM!</h1>
    <p>これはDOMの説明です。</p>
  </body>
</html>

これは以下のようなツリー構造（DOMツリー）で表現されます。

Document
│
├── <html>
│   ├── <head>
│   │   ├── <title> → "DOMとは？"
│   ├── <body>
│       ├── <h1> → "Hello, DOM!"
│       ├── <p> → "これはDOMの説明です。"

ツリー構造について、詳しくは以下の記事を参考にしてください。

つまり、ドキュメントをツリー構造（階層構造）として表現するという定義も含め、
ドキュメントを操作できるようにするためのモデルをDOMと言います。
この文脈で使用されるのが、モデルとしてのDOMです。

2-2. APIとしてのDOM

APIとしてのDOMは、HTMLやXMLのドキュメントとJavaScriptなどのプログラミング言語を接続するという文脈で使用されます。

DOM APIはDOMツリーを操作するためのプログラムインターフェースであり、JavaScript などのプログラムからDOMツリーを操作するためのメソッドやプロパティを提供するということです。

APIとは、ソフトウェアやアプリケーションを繋ぐインターフェース（接点）のこと。
つまり、DOM APIによってプログラムがDOMツリーを操作できるようになる。

よく使用されるAPIについては以下を参照してください。

3. DOM操作とは

「DOMを操作する」とは、ブラウザがメモリ上に保持しているDOMツリーを、JavaScriptなどのプログラミング言語で変更・追加・削除することを意味します。
つまり、HTMLやXMLの構造や内容を、プログラムによって変更することです。

具体的には、以下のような内容がDOM操作に該当します。

・HTML要素を取得する（例:<p>の内容を取得）
・HTML要素を作成する（例: <div> を新しく作る）
・HTML要素を追加・削除する（例: <ul> に <li> を追加）
・HTML要素の内容を変更する（例:<h1> のテキストを変更）
・HTML要素のスタイルを変更する（例: <p> の色を赤にする）

DOMを操作するために、JavaScript などのプログラムからDOM APIを使用します。
DOM操作でよく使用されるメソッドについては以下を参照してください。

4. 最後に

「DOM」という言葉が様々な文脈で使用されているため、その違いを認識できておらず、曖昧な理解のまま放置してしまっていました。
今回アウトプットするために時間をかけて様々な情報を見たことで、やっと自分の言葉で説明できるようになり、その過程で新しい知識も得ることができました。
諦めずに時間をかけてインプットとアウトプットを繰り返し、理解を深めていきたいと思います。

最後までお読みいただきありがとうございました！