"document" は階層の中でどんなところでしょう?
重要性: 4
document
が属しているのはどのクラスでしょうか?
DOM 階層内でのその場所は何でしょう? What’s its place in the DOM hierarchy?
Node
や Element
、あるいは HTMLElement
から継承していますか?
このように出力することによって、どのクラスに属しているかを知ることができます。:
alert(document); // [object HTMLDocument]
もしくは:
alert(document.constructor.name); // HTMLDocument
したがって、document
は HTMLDocument
クラスのインスタンスです。
それは階層でどんなところでしょう?
仕様を見ることもできますが、手動で把握する方が早いでしょう。
__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
からそれらを取り出します。