レッスンに戻る

"document" は階層の中でどんなところでしょう?

重要性: 4

document が属しているのはどのクラスでしょうか?

DOM 階層内でのその場所は何でしょう? What’s its place in the DOM hierarchy?

NodeElement、あるいは HTMLElement から継承していますか?

このように出力することによって、どのクラスに属しているかを知ることができます。:

alert(document); // [object HTMLDocument]

もしくは:

alert(document.constructor.name); // HTMLDocument

したがって、documentHTMLDocument クラスのインスタンスです。

それは階層でどんなところでしょう?

仕様を見ることもできますが、手動で把握する方が早いでしょう。

__proto__ を使ってプロトタイプチェーンをたどりましょう。

ご存知の通り、クラスのメソッドはコンストラクタの prototype にあります。例えば、HTMLDocument.prototype は document のためのメソッドを持っています。

また、prototype の内部にコンストラクタ関数への参照があります:

alert(HTMLDocument.prototype.constructor === HTMLDocument); // true

すべてのプロトタイプの組み込みクラスは constructor 参照があり、constructor.name でクラスの名前を得ることができます。 documentプロトタイプチェーン内のすべてのオブジェクトに対してそれをやってみましょう:

alert(HTMLDocument.prototype.constructor.name); // HTMLDocument
alert(HTMLDocument.prototype.__proto__.constructor.name); // Document
alert(HTMLDocument.prototype.__proto__.__proto__.constructor.name); // Node

console.dir(document) を使ってオブジェクトを調べ、 __proto__ を開くことでこれらの名前を見ることもできます。コンソールは内部的に constructor からそれらを取り出します。