なぜ知る必要があるか？
JavaScriptを使ってWebページに動きを付けるには、DOMの操作が必要。でもその前に、DOMの仕組みと構造を知らないと、どうやって操作したら良いか混乱する
DOMとは何か？
「Document Object Model」の略で、Webページ全体のコンテンツはオブジェクトだった。そして、JavaScriptから特定のオブジェクトにアクセスすれば、Webページに動きを付けることが出来る
つまりDOMは、JavaScriptからHTMLの「どこ」に「何」をするかを実現するための仕組みである
DOMはどんな特徴があるか？
①枝分かれした木構造になっている(DOMツリーと呼ぶ)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript basics</title>
</head>
<body>
<ul id="list">
</ul>
<input id="input_text" type="text">
<input id="button" type="button" value="Add!">
<script src="main.js"></script>
</body>
</html>
[index.html]のHTMLタグを、DOMツリーとして表現したもの
document(ドキュメントノード)
└── html(要素ノード)
├── head
│ ├── meta ─── charset(属性ノード)
│ ├── meta ─── http-equiv ─── content
│ ├── meta ─── name ─── content
│ └── title
│ └── #text JavaScript basics(テキストノード)
└── body
├── ul ─── id
├── input ─── id ─── type
├── input ─── id ─── type ─── value
└── script
要素タグや要素内の属性などは、オブジェクトでありDOMツリーとして構成されていた
②HTMLの各要素をノードとして扱う
DOMツリーではHTMLの各要素をノードと呼んでいる
・ドキュメントノード
全体を表すdocumentオブジェクト(DOMツリーだと根の部分)
・要素ノード
要素を表すオブジェクト(DOMツリーだと、document配下で起点となる部分)
・テキストノード
要素内のテキストを表すオブジェクト(DOMツリーだと、要素ノードに設定したテキスト)
・属性ノード
要素の属性を表すオブジェクト(DOMツリーだと横棒の部分)
・コメントノード
コメントを表すノード
※DOMツリーの位置に応じて各ノードの関係がある
・ルートノード
・親ノード
・子ノード
・子孫ノード
・兄弟ノード
document
└── html
├── head
│ ├── meta ─── charset(属性ノード)
│ ├── meta ─── http-equiv ─── content
│ ├── meta ─── name ─── content
│ └── title
│ └── #text JavaScript basics
└── body
├── ul ─── id
├── input ─── id ─── type
├── input ─── id ─── type ─── value
└── script
上記のhtml要素の場合、documentの子ノードで、headとbodyの親ノードである
調べてみて分かったこと
HTMLで指定した要素や属性は全てオブジェクトとして扱われ、JavaScriptでオブジェクトを指定してWebページに動きを付ける必要がある。
DOMツリーのノードを操作するメソッドが多いので、指定方法に困ったらDOMを確認した方が良さそう。