层次结构中的 "document" 在哪里?
重要程度: 4
document 属于哪一类?
它位于 DOM 层次结构(hierarchy)中的什么位置?
它继承自 Node 还是 Element,或者可能是 HTMLElement?
我们可以通过输出它,来看看它是属于哪个类的,像这样:
alert(document); // [object HTMLDocument]
或者:
alert(document.constructor.name); // HTMLDocument
因此,document 是 HTMLDocument 类的一个实例。
它位于 DOM 层次结构(hierarchy)中的什么位置?
是的,我们可以浏览规范,但是手动找出它会更快。
我们通过 __proto__ 来遍历原型链。
正如我们所知道的,类的方法在 constructor 的 prototype 中。例如,HTMLDocument.prototype 有用于文档(document)的方法。
此外,在 prototype 中还有一个对构造函数的引用:
alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
为了以字符串的形式获取一个类的 name,我们可以使用 constructor.name。让我们对整个 document 的原型链执行该操作,直到 class Node:
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 内部取出来。