「DOM」
～マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典（125）

解説

　「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>

出力結果

フィードバックお待ちしております！

　ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookやTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。