More than 5 years have passed since last update.

DOMについて

Posted at 2018-12-08

はじめに

エンジニア1年生です。
日々の学びのメモとしてコツコツと記事を書こうと思っています。
今回はDOMについて書いていきます。

「Document Object Model」の略

HTML や XML 文書のためのプログラミングインターフェイス
引用：https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction

スクリプト言語を使用してHTMLやXMLを操作する仕組みのことです。

DOMではHTMLやXMLをツリー状の階層構造として扱います。
この階層構造がDOMツリーと呼ばれます。
例えば以下のようなHTMLの場合

<body>
<div>
    <p id="cat">ねこ<p>
    <p>いぬ</p>
</div>
<div>
    <p>コアラ<p>
    <p>カンガルー</p>
</div>
</body>

DOMツリーは以下のように表せます。

DOMツリーの各要素がNodeという。
先程書いたDOMツリー構造のdiv、ｐなどの各要素のひとつひとつがNodeです。

divタグを基準に見てみるとbodyが親ノード、ｐが子ノードになります。

<script>
  var animal = document.getElementById("cat");
  animal.textContent = "ぱんだ";
  console.log(animal);
</script>

先ほど記述したHTMLからid="cat"のp要素を取得し、
内容をねこからぱんだに書き換えコンソールにも表示しました。

簡単ですが以上がｐノードを取得し、内容を書き換えたDOMの操作例です。

最初に勉強したときはDOMの考え方がよく理解出来ませんでしたが、
改めて見てみると普段からDOMを操作していることに気付かされました。

今後も曖昧にしている言葉の定義をひとつずつ明確にしなければ思いました。