解説
「DOM」は「Document Object Model」の略です。HTMLやXML文書をプログラムから利用するための仕組み（インターフェース）になります。DOMはツリー状の構造をしており、HTMLなどの文書から情報を読み取ったり、操作したりするための方法をプログラムに提供します。WebページではJavaScriptがそのプログラムを担っていますが、DOMとJavaScriptは独立した存在です。
ツリー状の構造は、「ノード」（結節点や末端）で構成されています。DOMでは、このノードのことを「エレメント」（element：要素）と呼びます。また、ある条件で抜き出したノードの配列のことを「ノードリスト」（nodeListあるいはelements）と呼びます。
HTMLのDOMでは、「window」と「document」の2つのオブジェクトが、中核的な意味を持ちます。windowはブラウザ自身を指す要素で、documentは文書のルートを指す要素です。documentには、要素を作る命令や特定のIDの要素を得る命令が存在しています。また、各要素にも要素を操作する命令が多数用意されています。documentもそうした要素の1つなので、共通の命令が利用できます。
サンプル
DOMを操作するJavaScriptのプログラムを掲載します。ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。
<html>
<head>
<title>「DOM」のサンプル</title>
<meta charset="UTF-8">
<script>
function init() {
// IDで選択して中身を変更
var eleA = document.getElementById('idA');
eleA.innerHTML = 'This is idA.';
var eleArr = document.querySelectorAll('.groupA');
eleArr.forEach((x, i) => {
var html = x.innerHTML;
x.innerHTML = '『' + html + '』';
x.style.background = ['#faa', '#aaf'][i % 2];
});
}
</script>
</head>
<body onload="init()">
<div id="idA"></div>
<div class="groupA">猫</div>
<div class="groupA">犬</div>
<div class="groupA">猿</div>
</body>
</html>
