DOM ノードをより深く見ていきましょう。
この章ではそれらが何者であるか、そしてよく使われるプロパティについて見ていきます。
DOM ノードクラス
異なる DOM ノードは異なるプロパティを持ちます。例えば、タグ <a> に対応する要素ノードはリンク関連のプロパティを持っており、<input> に対応する要素ノードは入力関連のプロパティを持っています。テキストノードは要素ノードとは違いますが、すべての DOM ノードのクラスは1つのの階層を形成するため、すべてのノードで共通のプロパティやメソッドがあります。
各 DOM ノードは対応する組み込みクラスに属しています。
階層のルートは EventTarget で、これは Node により継承されています。また他の DOM ノードはそれを継承しています。
ここに、図と説明があります:
クラスは次の通りです:
- EventTarget – はルートの “抽象” クラスです。このクラスのオブジェクトは生成されません。これはベースとして機能し、すべての DOM ノードはいわゆる “イベント” をサポートします。イベントについては後ほど学びます。
- Node – もまた “抽象” クラスで、DOM ノードの基底として機能します。これはコアなツリー機能を提供します。:
parentNode,nextSibling,childNodesなど(これらは getter です)。Nodeクラスのオブジェクトは決して生成されません。しかし、それを継承した具体的なノードクラス、即ち: テキストノードのText, 要素ノードのElementや、コメントノードのためのCommentなどもあります。 - Element – は DOM 要素のベースクラスです。
nextElementSibling,childrenやgetElementsByTagName,querySelector等の検索メソッドといった、要素レベルのナビゲーションを提供します。ブラウザでは、HTML だけでなく、XML や SVG のドキュメントがある場合もあります。ElementクラスはSVGElement、XMLElement、HTMLElementといったより具体的なクラスのベースとして機能します。 - HTMLElement – は最終的にすべてのHTML要素のベースクラスです。色々な HTML要素 がこれを継承しています。:
- HTMLInputElement –
<input>要素のためのクラス, - HTMLBodyElement –
<body>要素のためのクラス, - HTMLAnchorElement –
<a>要素のためのクラス - …など、各タグは固有のプロパティやメソッドを提供する独自のクラスを持っています。
- HTMLInputElement –
<span>, <section>, <article> のようなプロパティは固有のプロパティを持たない一方で、固有のプロパティやメソッドをもつ独自のクラスを持つ他の多くのタグがあります。
そのため、指定されたノードのプロパティとメソッドのフルセットは継承の結果として得られます。
例えば、<input> 要素の DOM オブジェクトを考えてみましょう。これは HTMLInputElement クラスに属しています。
それは、次の重ね合わせとしてプロパティとメソッドを取得します(継承順でリストしています):
HTMLInputElement– このクラスは入力固有のプロパティを提供し、次を継承しています。HTMLElement– 共通のHTML要素メソッド (とgetter/setter)を提供し、次を継承しています。Element– 一般的な要素のメソッドを提供し、次を継承しています。Node– 共通の DOM ノードのプロパティを提供し、次を継承しています。EventTarget– (対象となる)イベントをサポートし、- …そして最後に、それは
Objectを継承しています。なので、hasOwnPropertyのような “純粋なオブジェクト” メソッドも利用可能です。
DOM ノードのクラス名を見るに、オブジェクトは通常 constructor プロパティを持っていることを思い出してください。 これはクラスコンストラクタを参照し、 constructor.name はその名前です:
alert( document.body.constructor.name ); // HTMLBodyElement…もしくはその toString: