Javascript

DOMについて理解しよう

ブラウザが生成するDOM(Document Object Model)についてとDOMの関連用語を見ていきます。

  • ブラウザの仕組み
  • DOMツリー

ブラウザの仕組み

・ブラウザですが、 HTML を読み込むと実は内部的に Document Object Model (DOM )と呼ばれるデータ構造が作られて、その内容に応じてページが描画がされる仕組みになっています。そのDOMをJavaScriptで操作することによって様々な機能をつけることが出来ます。

・例えば、サイコロを作りたい場合はクリックできるボタンと1から6までの整数をランダムに出すpを作るとクリックすれば指定の範囲内の整数を出すことが出来ます。

・今まで学んできたJavaScriptでHTMLを動かすためにはこのDOM操作が必要なスキルになってきます。

・ただ、JavaScriptが操作しているのはあくまでDOMであってHTMLではありません。JavaScript で内容を書き換えたとしても、 HTML ファイルが書き換えられるわけではありません。

DOMツリー

・それぞれのデータは Node と呼ばれていて、 document から始まってツリー状に枝分かれしているので、これを Node ツリー、もしくは DOM ツリーと言います。

・文書内の改行や空白も Node になります。ただ、html 要素内の先頭と末尾のこれらは Node にならないというルールになっているので注意しておきましょう。

・ Node には種類はあって、 document と doctype は少し特殊なのですが、それ以外の HTML の要素を表す Node は要素 Node 、 Element Node 、 Text や空白、もしくは改行は Text Node と呼ばれます。

・それから、 Node 同士の関係には親子や兄弟といった用語をよく使います。たとえば、 head からすれば html は親なので Parent Node title は子 Node なので Child Node になります。同じ階層にあって兄弟関係にある要素は Sibling Node と呼ばれます。

-Javascript