DOMについて


はじめに

エンジニア1年生です。

日々の学びのメモとしてコツコツと記事を書こうと思っています。

今回はDOMについて書いていきます。


DOMとは??

「Document Object Model」の略


HTML や XML 文書のためのプログラミングインターフェイス

引用:https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction


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


DOMツリーとは??

DOMではHTMLやXMLをツリー状の階層構造として扱います。

この階層構造がDOMツリーと呼ばれます。

例えば以下のようなHTMLの場合

<body>

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

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


Nodeとは??

DOMツリーの各要素がNodeという。

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

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


javascriptによるDOMの操作例

<script>

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

先ほど記述したHTMLからid="cat"のp要素を取得し、

内容をねこからぱんだに書き換えコンソールにも表示しました。

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


まとめ

最初に勉強したときはDOMの考え方がよく理解出来ませんでしたが、

改めて見てみると普段からDOMを操作していることに気付かされました。

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