プログラミング勉強日記
2020年9月9日
JSについて調べていくうちにDOMを知り、JSを扱う上で絶対に知らないといけない仕組みだと思ったのでまとめる。
DOMとは
Document Object Modelの略で「ドム」と呼ばれ、HTMLやXML文書を取り扱うためのAPI。つまり、プログラムからHTMLやXMLを自由に操作するための仕組み。(APIについてはこちらでまとめている)
DOMではHTMLやXML文書をノードと呼ばれる階層的な構造として識別し、JSなどの様々なプログラミング言語やスクリプトから扱いたいノードを特定して操作できるようにする仕組みを提供する。
特徴
DOMに以下の3つの特徴がある。
- ツリー構造と呼ばれる階層構造を持つ
- それぞれノードで説明される
- WEBページとJSなどのプログラミング言語をつなぐ
階層構造をとる
階層構造は組織図的なもの。
HTMLの階層構造は以下のようになる。以下の例では<body>を頂点として下にいくつかの<section>と<p>で構成されている。これはHTMLで階層構造を構築した場合の一例であり、この階層構造を定義しているものがDOMと呼ばれる仕組みを使っている。
各要素はノードで表現される
DOMではノードと呼ばれる用語が出てくる。
以下のようにノードは各要素自体のことを表す。特定のノードを基準としたときに、その上にあるノードを親ノード、その下にあるノードを子ノード、同じ階層にあるノードを兄弟姉妹ノードと表現する。
