そもそもDOMって何の略？
A、Document Object Model
それぞれの頭文字をとって、DOMという訳である。
日本語に直すのなら、
「文章(Document)を、物(Object)として扱う、枠組み(Model)」
となる。
DOMの使われ方
DOMとは主にJavaScript等の言語とWEBページを繋いでくれる仕組み。
つまり、ウェブページ上のデータに介入にてほにゃららしたいのなら、DOMと向き合う事を考えなくてはならなくなる。
ブラウザ上の(HTML上の)文字の大きさを変えたり、色を変えたり、消したり、増やしたり、追加したりする動作をする為のもの。
ある部分だけ指定して変更を加えられるための取り決めとも言える。
後述するが、階層構造になっている性質から、指定したノードから見た別の場所のノード情報を取り出すなんて事も可能になる。
DOM周りのキーワード
ここからはDOMの周りで聞くキーワードを紹介します。
ノード
DOMでは、HTMLの要素1つ1つをノードと呼称する。
<body>も、<main>も、<p>も、<span>もそれぞれがノードである。
親ノード/子ノード
親ノードは、そのノードの分岐元のノードの事。
子ノードは、そのノードの配下にあるノードの事。
例えば、
test.html
<body>
<p>test</p>
</body>
というHTMLがあれば、
・<p>は<body>の子要素。
・<body>は、<p>の親要素。
という関係になる。
ルートノード
あるノードの元祖の親元になっているノードの事。
枝分かれになった子ノードの始まり部分のノードを指すので、ある意味アダムとイブ的なノードと言える。
階層構造
DOMにおける、HTMLの扱い方・捉え方
HTMLは階層的な構造をしているととらえることができる。
例えば