ノードについて
前回の投稿でDocument内の各要素をノードで表記しました。
このノードはjavascriptの言語仕様で言うNodeオブジェクトになります。
Nodeオブジェクトということは、プロパティやメソッドを持つので、
プロパティとメソッドがそれぞれどのようになっているのか、調べてみます。
前回投稿した下記のHTMLを元にノードを考えてみます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>propansystem開発ブログ</title> </head> <body> <h1>ブログタイトル</h1> <p>ブログ本文内の<b>太字</b>テキストです</p> </body> </html>
まずドキュメント全体を指し示すのがDocumentノードといい、HTML要素はElementノード、テキストを表すものはTextノードです。
Document、Element、Textノードは、Nodeオブジェクトの派生ノードで、DocumentとElementはDOM操作において重要なDOMクラスと言えます。
また、Nodeオブジェクトの派生型については、大きく分けてDocument型とElement型に分かれ、
Element型は、HTMLElementオブジェクトとして画面上のHTMLタグ(ドキュメント)を表します。
Document型は、ブラウザに読み込まれたウェブページを表します(DOMツリーのエントリポイントを表します)
HTMLElement型について
HTMLElementには多数の派生型があり、一般的にはHTMLタグの要素を示します。
派生型ごとにjavascriptのプロパティが定義され、指定した要素と同じ値が格納されます。
ノードの種類については、上で書いた
Document、DocumentFragment、Element、の他にCaracterData(Text、Comment)、Attr等があります。
各ノードは「属性」を持ち、子ノードは親ノードの属性を継承して参照することができます。
Elementノードは名前/値のペアで扱えるメソッドが定義されています。