DOMとは
Javascriptを勉強しているとDOMという言葉を見かけるようになりました。
今日はこのDOMというものについて見ていきましょう。
DOMの説明に入る前にWindowオブジェクトについてきちんと理解する必要があります。
Windowオブジェクトとはブラウザの持っている情報そのものです。
例えばこのページのWindowsオブジェクトを見てみましょう。
console.log(window);
これでコンソールツールにWindowオブジェクトが書き出されます。
Windowをクリックするとこのように沢山の情報が表示されます。
Windowオブジェクトは現在開いているタブが持っている情報の全てを格納しています。
documentオブジェクト
Windowオブジェクトの1つにdocumentオブジェクトというプロパティがあります。
このdocumentプロパティが持っているのがHTMLで表現されているコンテンツをすべて持っているブジェクトであるdocumentオブジェクトになります。
先程のwindowオブジェクトの中からdocumentプロパティをクリックしてみましょう。
たくさんのdocumentオブジェクトが表示されます。
DOMではこのオブジェクトを使って、要素の値を取得したり操作することができます。
ツリー構造
DOMはツリー構造で情報を持っています。
ツリー構造という言葉自体は知らなくても、無意識のうちによく目にしていると思います。
デベロッパーツールのElementを開いてみると、
headとbodyに分かれている
bodyの中には子要素があって、子要素の中に孫要素がある
というのがわかると思います。
このぶら下がり構造のことをツリー構造と呼んでいます。
<head>
<tittle>ツリー構造</tittle>
</head>
<body>
<h1>ツリー構造を見てみよう！</h1>
<div id="content01">
<h2>ツリー構造ってなんだろう</h2>
<p>実際にデベロッパーツールを開いて見てみよう</p>
</div>
</body>
実際にデベロッパーツールを開いて確認してみて下さい。
親要素に三角形が表示されてクリックすると子要素が表示されます。
このようにツリー構造は形成されます。
実際の操作方法については次回書いていきます。
せば！
