企业官网建设流程全解析

• 文档
• 教程
• 前端

document是每个网页脚本最先接触的全局对象，但它在 DOM 类层次结构中究竟属于哪一类？它继承自Node、Element还是HTMLElement？本篇以本仓库 4-where-document-in-hierarchy 练习 及其 官方解答 为核心，结合 《节点属性：type、tag 和 content》章节正文 的完整类层次知识，讲解如何用constructor.name、__proto__原型链遍历、instanceof等手段自行定位document的类归属，并掌握"不用查规范、手动在控制台里验证继承关系"的通用排查技巧。读完你将能准确说出document的完整继承链，并理解Document与HTMLDocument这两个类在规范与浏览器实现中的微妙关系。

任务原题：document 属于哪一类

在 task.md 中，本教程给出了一道自测题（importance: 4）：

document属于哪一类？它位于 DOM 层次结构（hierarchy）中的什么位置？它继承自Node还是Element，或者可能是HTMLElement？

表面上看，document与document.body、document.querySelector('div')返回的元素一样都是"节点"，但document并不对应任何 HTML 标签，它既不是Element也不是HTMLElement——它在 DOM 树中扮演的是"整份文档"的角色。要得到确切答案，不必翻阅规范原文，直接用 JavaScript 本身就能把它的类身份"逼问"出来。

第一步：直接读出对象的类名

最直接的验证方式是输出document本身。浏览器对 DOM 对象的toString会给出[object 类名]的形式：

alert(document); // [object HTMLDocument]

更规范的做法是通过constructor属性读取类名——每个对象都持有对其构造函数的引用，constructor.name就是构造函数的名称：

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

因此，document是HTMLDocument类的一个实例，而不是Node或Element的直接实例。这两个输出已经回答了"属于哪一类"的问题，但"位于层次结构的什么位置"还需要继续向上追溯。

第二步：沿原型链向上遍历

类的方法存放在构造函数（constructor）的prototype中，例如HTMLDocument.prototype上挂着文档专用的方法；同时，prototype对象内部又持有对构造函数的反向引用，可用constructor取回：

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

利用这一性质，我们可以在任意一个类对象上通过constructor.name拿到类名，再通过__proto__跳到父类的prototype，一路向上，直到顶层类Node：

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

结果清晰地给出了继承链：

document → HTMLDocument → Document → Node

HTMLDocument.prototype的原型是Document.prototype，而Document.prototype的原型又是Node.prototype。document的实例方法就是这条链上每一层prototype叠加的结果——这就是它位于 DOM 层次结构中的确切位置。

提示：__proto__是浏览器长期支持的（遗留）访问器。在需要严谨的现代代码中，可以用Object.getPrototypeOf(HTMLDocument.prototype)等价的Object.getPrototypeOf调用来替代，两者的溯源结果一致。

第三步：用 console.dir 可视化验证

除了代码层面的遍历，开发者工具还提供了图形化验证方式。在控制台执行：

console.dir(document);

然后逐层展开__proto__，可以看到每一层原型对象的constructor名称依次为HTMLDocument、Document、Node、EventTarget……控制台展示的名称正是从各层constructor内部读取出来的，与代码遍历的结果完全对应。

需要留意的是console.dir与console.log对 DOM 对象的差异（详见 article.md 的说明框）：

• console.log(elem)显示元素在页面中的 DOM 树；
• console.dir(elem)把元素当作 JavaScript 对象展开，非常适合探查其原型与属性。

全景：DOM 节点类的完整层次结构

document的归属只是整张 DOM 类层次图的一个分支。根据 article.md 的"DOM 节点类"一节，所有 DOM 节点属于相应的内建类，并形成以EventTarget为根的单一路径继承结构，本仓库的 dom-class-hierarchy.svg 给出了完整图示：

各层类的职责如下：

• EventTarget—— 一切 DOM 节点的根"抽象"类，对象从不被直接创建，作用是让所有 DOM 节点统一支持事件机制；
• Node—— 同为"抽象"类，提供树的核心功能：parentNode、nextSibling、childNodes等（均为 getter）；
• Document / HTMLDocument—— 代表整份文档，全局变量document即此类的实例，充当 DOM 的入口。由于历史原因HTMLDocument继承自Document（尽管最新规范对此不再强制规定）；
• CharacterData—— "抽象"类，派生出Text（元素内部文本）与Comment（注释）；
• Element—— 元素的基础类，提供nextElementSibling、children、getElementsByTagName、querySelector等元素级导航与搜索能力；它进一步派生出SVGElement、XMLElement和HTMLElement；
• HTMLElement—— 所有 HTML 元素的基础类，又被HTMLInputElement（<input>）、HTMLBodyElement（<body>）、HTMLAnchorElement（<a>）等更具体的类继承；没有专属属性的元素（如<span>、<section>、<article>）直接就是HTMLElement的实例。

把document放回这张图里，它的完整继承链实际是：

document → HTMLDocument → Document → Node → EventTarget → Object

（最底层还有普通对象Object，因此hasOwnProperty这类"普通对象"方法同样可用。）可以看到，Element与Document在Node之下分属两个不同分支——这正是document既不是Element也不是HTMLElement的结构性原因。

交叉验证：instanceof、nodeType 与 nodeName

除了原型链遍历，article.md 还提供了多种互补的验证手段。

instanceof 检查继承关系。以document.body（HTMLBodyElement实例）为例，它对链上每一层类都返回true：

alert(document.body instanceof HTMLBodyElement ); // true alert(document.body instanceof HTMLElement ); // true alert(document.body instanceof Element ); // true alert(document.body instanceof Node ); // true alert(document.body instanceof EventTarget ); // true

对document做同样的检查，它会通过Node与EventTarget的验证，但会失败于Element/HTMLElement——再次印证它不在元素分支上。

nodeType 数值判型。nodeType是只读的数值型属性：元素为1，文本节点为3，而document对象为9：

alert(document.nodeType); // 9

nodeName 与 tagName 的差异。tagName仅由Element类提供，因此对document返回undefined；nodeName对任意Node都有效，document的值为#document：

alert(document.tagName); // undefined（document 不是元素） alert(document.nodeName); // #document

nodeName返回#document而tagName为undefined，是从属性层面证明"document 不是元素"的直观证据。

常见误区与注意点

1. 不要把Document与HTMLDocument混为一谈：Document是通用文档接口，HTMLDocument是其针对 HTML 文档的历史性扩展类，document的实例类实际是HTMLDocument（constructor.name可直接确认）。现代规范对二者的继承关系不再强制，但主流浏览器的原型链仍保持HTMLDocument → Document → Node，本仓库的解答也是按此给出。

2. __proto__与Object.getPrototypeOf：__proto__是便捷的访问器，适合在控制台快速溯源；严谨的库代码应优先使用Object.getPrototypeOf()避免依赖遗留属性。

3. 实例方法来自继承链叠加：document能调用querySelector、getElementById（来自Document/HTMLDocument层）以及parentNode、childNodes（来自Node层），这正是类层次结构的意义所在——给定节点的全部属性和方法是整条继承链的结果。

4. Element 分支与文档分支在 Node 处分叉：判断一个对象"是不是元素"时，优先用instanceof Element而非instanceof Node——因为document、文本节点、注释都会通过Node检查，却都不是元素。

总结

回到任务原题：document是HTMLDocument类的一个实例，位于 DOM 层次结构Node之下的文档分支，完整继承链为HTMLDocument → Document → Node → EventTarget，它不继承自Element，更不是HTMLElement。

验证路径可以归纳为三步，无需查阅规范：

1. alert(document.constructor.name)直接读出实例类HTMLDocument；
2. 沿HTMLDocument.prototype.__proto__逐层用constructor.name打印，得到Document、Node；
3. 用console.dir(document)展开原型链做图形化复核，或用instanceof、nodeType === 9、nodeName === '#document'从多个角度交叉确认。

这套"类名 + 原型链 + 控制台"的排查手法不仅适用于document，也适用于任意 DOM 节点（例如document.body.constructor.name会得到HTMLBodyElement），是深入理解 DOM 节点类 体系的通用技能。

• 文档
• 教程
• 前端