了解Web API DOM接口

Question

我正在尝试了解有关Web API的更多信息。通过阅读它们，我发现在各种各样的Web API中有DocumentObjectModel API。阅读有关DOM规范的信息，我会找到许多DOM接口的列表。这让我感到有些沮丧。无知，我认为一个API应该只包含一个接口（只有一组函数和属性），在这里我找到了一个接口列表...这是我不了解的第一件事。

而且，我通常使用诸如

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

我看到其中一些DOM接口具有我已经知道的名称，例如“文档”或“窗口”，我使用它们（就像在前两行代码中一样），但是我使用的名称没有大写（“文档”而不是“文献”）。我不明白是否有链接beetwen的“文档”和“文档”，例如...

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

因此，您可以帮助我更深入地了解DOM API吗？

Answer 1

这些东西是由 javascript 和 DOM 规范的交互产生的。

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

在Javascript中，当在浏览器环境中执行时， 的实例Window是全局对象，Window也是其原型。document和window是这些接口定义的 getter 属性。由于窗口是全局对象（顶层this），并且变量名称解析沿着作用域链向上移动，最后到达全局对象，如果在其他地方找不到它，window最终将解析为<global object>.window。这是接口上定义的属性Window，它返回窗口实例本身，也是全局对象。这是自我指涉的。

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

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

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

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