DOMおれおれAdvent Calendar 2015 – 08日目

2015-12-08

HTMLの要素をたくさん作ってウェブページを作るわけだけども、要素以外にも「ノード」はあります。

ノード？

HTMLはタグを入れ子に書いて組み立てるというのはご存知の通り。そしてそのタグで記述された要素の階層構造が「ツリー」になります。

ツリーの一番上の要素が <html> 要素で、タグとしてはその 中 に <head> と <body> とがあって、これを階層構造で見た場合は 下 になる、と。さらに <head> の 下 に <title> があって <body> の下には <h1> とかそういうのがあって、またその下には……みたいな。

html
+- head
|  +- meta
|  +- title
|
+- body
   +- main
   |  +- h1
   |  +- div
   |
   +- footer
      +- address

要素のツリーだとこんな感じ。そしてツリーの各所の事をノード（node; 節）と呼びます。要素は全部ノードね。

で、HTMLに各のは要素だけじゃないですね。なじみ深いものが他に二種類。

ひとつは文字列。

ひとつはコメント。

これらも全部ノードです。というわけで、それらもさっきの図に加えてみるとこんな感じに。（文字列は “#” 開始、コメントは “!” 開始というおれおれルールとしまし。）

html
+- head
|  +- meta
|  +- title
|     +- # Ginpen.com
|
+- body
   +- ! コンテンツ主部
   +- main
   |  +- h1
   |  |  +- # Ginpen.com
   |  +- div
   |
   +- ! フッター
   +- footer
      +- address
         +- # Ginpen.com

どうだろう、ちゃんと伝わるかなあ。開発者ツールのインスペクターを見ると、階層ってのがわかりやすいかも。

document-tree
インスペクターで見てみたもの。

ノードの種類

ここまでに三種類挙げましたが、現在のDOM的には以下の七種類があるみたいです。

種類 定数 補足
要素 node.ELEMENT_NODE
文字列 node.TEXT_NODE
node.PROCESSING_INSTRUCTION_NODE XML。よくわかんない
コメント node.COMMENT_NODE
文書 node.DOCUMENT_NODE JSの document
文書タイプ node.DOCUMENT_TYPE_NODE <!DOCTYPE html>
文書断片 node.DOCUMENT_FRAGMENT_NODE JavaScriptで使う

ウェブページ（HTML文書）全体が document ですね。HTMLファイルをテキストエディターで開くと <html> 要素の他にも <!DOCTYPE html> がいきなりでてくると思いますが、この二つが document ノードの子ノードになります。

document
+- `<!DOCTYPE html>`
+- html
   +- head
   +- body

nodeType

nodeType にノードの種類が入ってます。比較に使える定数も各ノードのオブジェクトにぶらさがってます。

var node;

node = document;
console.log(node.nodeType === node.DOCUMENT_NODE);  // => true

node = document.body;
console.log(node.nodeType === node.ELEMENT_NODE);  // => true

var elTitle = document.querySelector('title');
node = elTitle.firstChild;
console.log(node.nodeType === node.TEXT_NODE);  // => true

参考