概要
Vue.jsを基礎から勉強しているのですが、DOMって聞いたことあるけど理解していない状態だったので、簡単にまとめて見ました。
DOMってなに？って聞かれたときに答えられるぐらいの知識を書いておきます。
DOMとは
Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイスです。
ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。
DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。
噛み砕いて簡単に言うと、「JavascriptからHTMLを操作できる仕組みのこと」ぐらいに思っておけば良いのかと
こう言われると簡単な気がしてきませんか？
クリックしたら文字が変わるとか、そういったことを実現する仕組みがDOMです。
DOMの特徴
DOMには特徴が主に３点あるので見てみましょう。
- ツリー構造と呼ばれる階層構造がある
- それぞれの階層のことを「ノード」と表現する
- WEBページとJavaScriptなどのプログラミング言語とを繋ぐ役割
DOMのツリー構造とは
図で見てみましょう。
htmlの中にheadとbodyを書いて、headの中にはtitleタグがあって、みたいな構造になっているんですね。
ちなみにこれをHTMLで書くとこのようになっています。
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>メインタイトル</h1>
<div>
<p>テキストテキストテキスト</p>
<img src="./img/hoge.jpg" alt="hoge">
<div>
</body>
</html>
ほとんどの人が無意識に階層構造で書いているんですね。
ノードとは
ノードは上の階層構造を表す1つ1つのこと
上の図にもあるように、Elementオブジェクトのbodyやtitleなど１個ずつをノードと呼びます。
ノードには親子関係もあります。
例えば、
【document】は【html】の【親ノード】
【p】は【div】の【子ノード】
このように表現されることがあります。
最後に
実際にDOM操作をしている内容も追加したかったのですが、長くなりそうだったので、今回は割愛しております。
気になる方は参考サイトをご確認ください。