📚

DOMをざっくり理解する。

2022/03/27に公開

HTML

JavaScript

DOM

tech

はじめに

Reactを書いているとDOMという言葉をよく目にします。しかしDOMを理解していなくてもReactは使えます。「DOMとか難しそう。。。あとで勉強すれば良いや。」そう思っていました。ついにその時が来て勉強してみたら「なんとなく理解した」という感じになれたので記事にしました。私と同じような状況の方の助けになればと思います。誤り等あればコメントいただけますと幸いです。

DOMとは？

DOMは（Document Object Model）JavaScriptのオブジェクト。HTMLの構造をツリー構造のオブジェクトで表したもの。

例えば次のようなHTMLがある。

<div>
  <p>hello</p>
</div>

これをDOMに変換する。（これは説明用に書いたもので実態は異なるがだいたいこんな感じ。本当のDOMは記事の後半で確認できる。）

const document = {
  name:"div",
  children:{
    name:"P",
    value:"hello"
  }
}

また、上では説明が複雑にならないように省略していたが、cssの情報もDOMは持っている。
HTML + CSSでDOMは作られている。次項以降で本物のDOMを確認する。

DOMはいつ作られるのか?

ブラウザを利用してWebページを閲覧する際、まず初めにサーバーからHTMLファイルを受け取る。受け取った時点のHTMLファイルは0と1のデータなので、人間が見られるようにHTMLの解析作業を行う。そのときにDOMが作られる。

実際にDOMを見てみる。

DOMのツリー構造のトップレベルにはdocumentという特別なオブジェクトがいる。documentはDOMが作られる際に一緒に作られるオブジェクト。DOMへアクセスをするための入り口のようなオブジェクトでDOMへアクセスするための便利メソッドなどを持っている。jsを触ったことある方なら次のような構文を見たことあるかも。

document.getElementById

では実際にDOMのdocumentオブジェクトを見てみる。
F12でデベロッパーツールを開く。
Consoleタブでdocumentと入力する。

これはHTMLに見えるが実際はDOM。ブラウザが見やすくするために勝手に変換しているだけ。変換されていないdocumentをみるにはconsole.dir(document)と入力する。今度はしっかりオブジェクトで表示される。
オブジェクトの上の方にallというプロパティがあるので開いてみるとhtmlの全要素が確認できる。それぞれ開いてみるとわかるがすべてオブジェクトであることがわかる。

DOMを操作する

さきほどブラウザのコンソールで確認したdocumentの中にあるallを確認するには以下のようにすれば良い。

document.all[n]

DOMはjsのオブジェクトなので、allに対してはmapメソッド等も使える。
ではMDNのページで実際にDOMを操作してみる。

devtoolを開いて以下のように入力する。

document.getElementById("ウェブ開発者のためのドキュメント")

html要素が取得できたが前項で確認した通り、これはブラウザが見やすいようにHTML要素風に変換しているだけ。

console.dir(document.getElementById("ウェブ開発者のためのドキュメント"))

こうするとオブジェクトであることがわかる。
以下の通りに入力すると取得したDOM要素のinnerTextを書き換えることができる。

document.getElementById("ウェブ開発者のためのドキュメント").innerText = "書き換えた！！！"

するとブラウザに表示されている文字が変化するのがわかる。このようにDOMを操作することで画面の見た目を更新することができる。

↓

DOMとは？（より詳しく）

DOM ( Document Object Model ) とは、HTML文書をツリー状のデータ構造として扱い、それをプログラムから参照したり操作したりするためのデータ構造やインタフェース ( API ) を定義したものです。

プログラムと書いているが基本的にJSのことだと思えばOK。ほとんどのブラウザは標準でJavaScriptによる参照や操作ができるようにDOMを作っている。

なぜDOMが必要になったのか？

1990年代、webが始まったときには静的なwebページしかありませんでした。次第に動きのある動的なコンテンツ配信を望む声が増えていきました。そんな時代に開発されたのがJavaScript。DOMを操作するプログラムをJSで書くことで動的なWebページが作れるようになった。