JavaScript初心者の疑問：「DOM」って結局なに？

ふるし

2018年10月20日 16:49

わかっていそうでずっとわからなかった単語「DOM」。

「簡単すぎて人に聞けない！」
「だけど意味を聞かれても説明できない！」
そう思って、今回は言語化してみようと思います。

「DOM」とは何か？

DOMとは、JavaScriptでhtmlの要素を操作するための仕組みのこと。

「Document Object Model」の略で、直訳は「ドキュメントをオブジェクト（物）として扱うモデル」。HTMLやXMLといったドキュメントを扱うための仕組みと表現できる。

DOMとはどんな仕組み？

まず、ツリー構造と呼ばれる階層構造を取るのがDOMの特徴。

以下のように、HTMLは<body>を頂点として、その下にいくつかの<section>と、そのさらに下にいくつかの<p>で構成されている。

<body>
　　<section>
　　　　<p>あいうえお</p>
　　　　<p>かきくけこ</p>
　　</section>

　　<section>
　　　　<p>アイウエオ</p>
　　　　<p>カキクケコ</p>
　　</section>
</body>

DOMという仕組みが、この階層構造を定義している。

各要素は「ノード」と呼ばれ、階層の上から「親ノード」「兄弟姉妹ノード」「子ノード」のように表現される。

<body>　　// 親ノード
　　<section>　　// 兄弟姉妹ノード
　　　　<p>あいうえお</p>　　// 子ノード
　　　　<p>かきくけこ</p>
　　</section>

　　<section>
　　　　<p>アイウエオ</p>
　　　　<p>カキクケコ</p>
　　</section>
</body>

HTMLを操作するときには、上記のノード（要素）を指定してWebページ内の指定箇所とプログラミング言語を繋ぎ、値を操作します。

具体的に「DOM」でできること

<p>や<img>のようなの要素にアクセスできる。DOMを操作することにより、各要素の値をダイレクトに操作することが可能です。

例えば、<p>の中身のテキストを変更したり、<img src="sample.jpg">の中身を変更して別の画像に差し替えたりすることができる。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Page Title</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>    
</body>
<script>
       // ここにJavaScriptコードを書いていく
</script>
</html>

まとめ

DOMとは、「JavaScriptによってHTMLを操作することができる仕組み」を指しているということが今回のキーワードでした。