#DOM::「Document Object Model」::(ドキュメント オブジェクト モデル)
###DOMとはこう言うもの
一つググってもの分からないのでいろんなサイトの一言まとめを集めてみた!
"DOMとはマークアップがなされたリソース(Document)をリソース要素(Object)の木構造(Model)で表現し操作可能にする仕組み、またそのモデル"
"DOMとはJavaScriptでhtmlの要素を操作するための仕組みのこと"
"DOMはブラウザがWebページを解釈したもの"
"DOMは、文書のためのプログラミングAPI"
う〜ん、意味がよくわからない・・・
#と言うわけで! いろいろなまとめから分かりやすくまとめてみた。
つまり・・・
###1、Webページの基本的なHTML構造を表現したものでページごとに発行されている
###2、ツリー構造(のモデル)で表現されていること
###3、jqueryやVue.jsとかは、これを参照して操作する対象を探すことができる!
と言うこと!
※初心者向けにイメージしやすく書いているので、多少の語弊があるかもしれません。
#実際に見てみよう!
見るのは簡単!DOMを調べるくらいのあなたなら、すぐに理解できる・・・はず!
このページを右クリック → 検証 → Elements(検証クリックしたら最初に出てくる左側の部分)
これこれ!
単純なモデルですが、<html>のなかに<head>と<body>が入っていて、
<head>...</head>の中にはたくさんの設定が入っていたり、
<body>...</body>の中にもdivとかaとかpとかいろいろな要素が階層的(ツリー構造)になって書かれていますね!
もはやツリー構造の説明になってる・・・
htmlでidやclassをつけると、それがDOMに反映され、目印になっていて、JSなどの言語によってブラウザ上で操作ができるわけです!
言い換えると、ブラウザ上での何かを変更する際は、JSでDOMにアクセスし、その内容やプロパティを変更しているわけです。
ソースコードを書き換えるわけではありません。
#もう一度まとめると
###DOMとは、
####ページごとに発行されるページの詳細な内容を操作可能にするもの
であることがわかった!