DOM继承树

最新推荐文章于 2025-05-21 10:11:27 发布

原创最新推荐文章于 2025-05-21 10:11:27 发布 · 516 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#dom继承树

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文探讨了DOM继承树的概念，详细阐述了document如何继承自HTMLDocument及其与Document.prototype的关系。同时，解释了如head、body等元素的继承源，并讨论了getElementById、getElementByName、getElementsByTagName等方法的适用范围。另外，提到了HTMLDocument.prototype中定义的常用属性，如body和head，以及Document.prototype上的documentElement属性。最后，概述了getElementsByClassName、querySelector和querySelectorAll等方法在不同原型上的定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、继承树
在这里插入图片描述

document表示文档对象，而它的构造函数是HTMLDocument
HTMLDocument.prototype.proto = Document.prototype
因此，document和Document之间的关系就是：
document继承自HTMLDocument.prototype,而HTMLDocument.prototype又继承自Document.prototype
head,body等标签直接继承自HTMLHeadElement.prototype，HTMLBodyElement.prototype等
getElementById方法定义在Document.prototype上，即Element节点不能调用该方法。
getElementByName方法定义在HTMLDocument.prototype上，即非document元素不能调用该方法。
getElementsByTagName方法定义在Document.prototype和Element.prototype上
HTMLDocument.prototype定义了一些常用的属性，body,head分别指代body，head标签
document.body = ;
document.head = ;
Document.prototype上定义了documentElement属性，指代文档的根元素。
document.documentElement =
getElementsByClassName、querySelector、querySelectorAll在Document.prototype和 Element.prototype上均有定义。