javascript - 了解 Web API DOM 接口(interface)

Question

我正在尝试了解有关 Web API 的更多信息。通过阅读它们，我发现在种类繁多的 Web API 中，有 DocumentObjectModel API。在阅读 DOM 规范时，我找到了很多 DOM 接口(interface)的列表。这让我感到有些不安。在我的无知中，我认为一个 API 应该只包含一个接口(interface)(只有一组函数和属性)，在这里我找到了一个接口(interface)列表......这是我不明白的第一件事。

此外，我通常使用像这样的符号与 DOM 交互

document.getElementById("idname");
document.getElementByTagName("tagname");
etc ect

我看到其中一些 DOM 接口(interface)具有我已经知道的名称，例如“Document”或“Window”，我使用它们(就像在前两行代码中一样)但我使用它们时没有大写(“document”而不是“文档”)。我不明白“文档”和“文档”之间是否存在链接，例如...

最后，我注意到查询全局对象(例如，在浏览器控制台中，只需键入关键字“this”)我得到一个响应对象(我猜)包含所有属性和函数(或方法) ) 的全局对象。其中还有在 DOM 接口(interface)列表中列出的具有相同名称的函数。这只是我注意到的另一件事，我无法解释。

那么，你能帮我更深入地理解 DOM API 吗？

Answer 1

这些东西源于 javascript 和 DOM 规范的交互。

大写字母 Window和 Document是由 DOM 定义的接口(interface)和 HTML规范。

在 Javascript 中，当在浏览器环境中执行时，Window 的一个实例是全局对象，Window是它的原型(prototype)。 document和 window是由那些接口(interface)定义的 getter 属性。由于窗口是 global object (顶级 this )和变量名称解析沿着作用域链向上走，如果在其他地方找不到它，最终会到达全局对象 window最终会解析为<global object>.window .这是 Window 上定义的属性接口(interface)，它返回窗口实例本身，它也是全局对象。它是 self 参照的。

因此全局对象最终具有由 javascript、dom/html 规范定义的属性，并继承自同样由这些不同规范定义的原型(prototype)。

一些原型(prototype)也被公开为全局对象中的命名属性，而不仅仅是实例的原型(prototype)链。这方便instanceof检查和特征检测。还公开了一些构造函数，例如new Image()创建 HTMLImageElement 的新实例同理document.createElement("img")会的。

可以通过各种构造函数或工厂创建其他文档实例，例如 DOMParser .可以通过框架、页面的打开器或生成的子窗口访问其他窗口实例。

使用调试器查看窗口对象可能会有帮助。