はじめに
Webの世界に入って(?)１年ですが、DOMについてなんとなくしか理解してなかったので、まとめてみます。
DOMとは
Document Object Model の略。ひとことでいうと、HTMLなどのマークアップ言語を、JavaScriptなどのプログラミング言語で操作するための、API(Aplication Programming Interface)といえます。Ajaxなどの技術も、DOMを用いて実現されています（たぶん）。
DOMでは、その名の通り、文書の要素をそれぞれオブジェクトとみなします。つまり、文章全体はオブジェクトの集合です。
ドキュメントツリー
DOMにおいて、HTMLはツリー構造として扱われます。例えば、以下のHTMLは、次のようなツリー構造を持っています。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOMの基本</title>
</head>
<body>
<p id="identical">これが<strong>ドキュメントツリー</strong>だ！</p>
</body>
</html>
html
├── body
│ └── p
│ └── strong
└── head
├── meta
└── title
このhtmlタグ一つ一つはノードと呼ばれ、ノードを指定するために、XPath、CSSセレクタなどの方法があったりします。
たとえば、pタグの「DOMの基本」を指定するXPathは、
/html/body/p[@id="identical"]
あるいは
//p[@id="identical"]
となります。