DOM操作について

何事においても基本が重要であると誰もが頭では分かっていても、なかなか実践するのは困難です。
入門編では、基礎的な用語や文法、構文を一から詳しく説明しているため、なにせコンソールとアラートへの出力ばかり。
そのせいで「Webプログラミングをやっている」という実感が湧きづらかったかと思います。

そういう意味では、当ブログの「詳説 JavaScript」を入門編から順に読破された方は、その時点でエンジニアとしての強い資質を有していると言えます。

ここからは心機一転、「これぞ、Webフロントエンド開発」と感じられる内容になります。

1 DOMとは
2 DOM操作とは
- 2.1 【用語】要素（Element）とノード（Node）
3 イベントについて
4 まとめ

DOMとは

DOMとは、Document Object Modelの頭文字をとった略称です。
ここでいうDocumentとは、Web上の文書を指しており、主にHTMLドキュメントが該当します。

よって、WebドキュメントのHTML全体を一つのモデルとして捉え、プログラムによって操作可能にするためのインターフェイスであると言えます。

もう少し専門的な用語に置き換えると、以下のようになります。

DOMとは、WebドキュメントのためのAPI（*1）であり、文書構造、スタイル、コンテンツをプログラムで変更可能にする仕組みです。

*1：APIとはApplication Programming Interfaceの頭文字をとった略称です。

略称が次から次へと出てきて嫌になるかもしれませんが、ひとつひとつ自分のものにしていきましょう。

DOM操作とは

DOM操作とは、プログラミング言語（JavaScriptやPythonなど）を使って、Webドキュメント（HTMLやSVGなど）を操作することです。

DOM（Document Object Model）は、マークアップ言語（HTMLやXMLなど）の文書を木構造で表現したデータモデルとしてブラウザーで読み込まれます。

DOM操作の技術を使用することで、この木構造を「ノード」（node）として操作することができ、Webページの要素の読み取り、変更や追加、削除を可能にします。

【用語】要素（Element）とノード（Node）

要素（Element）とは、HTMLのタグと属性、内容の組合せを指します。
具体例を示すと以下のものが一つの要素（Element）です。

<p class="test">これは一つの要素です。</p>

赤マーカー部分がタグ、黄色マーカー部分が属性、青マーカー部分が内容です。

ノード（Node）とは、前述の要素（Element）をはじめ、HTMLコメントやDOCTYPE宣言があり、次の3種類に分けられます。

ELEMENT_NODE
- HTMLのタグ = body、h、div、pなど…
DOCUMENT_TYPE_NODE
- DOCTYPE宣言 👉 <!DOCTYPE html>
COMMENT_NODE
- HTML内のコメント 👉

イベントについて

ここからDOM操作の学習を始めるにあたり、「イベント」という用語を知っておく必要があります。

Webサイトでは、アクセスした「ページの読み込み」、「ボタンのクリック」、「フォームへの入力」、「マウスポインタを要素の上に乗せる」など、様々な出来事やユーザー操作が発生します。
こういったWeb上で発生するすべての出来事、ユーザー操作を、JavaScriptでは「イベント」と呼びます。

まとめ

DOMとは、Document Object Modelの略であり、プログラミングインターフェイス
DOM操作とは、プログラミング言語によってDOMを操作すること
イベントとは、Web上で発生するすべての出来事、ユーザー操作を指す

本記事での内容をしっかり記憶・理解いただいた状態で、実際のDOM操作に進まれることをお勧めします。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

それでは、最後までお読みいただきありがとうございます。

『詳説 JavaScript』メニューに戻る