为什么 dom-elements 作为窗口对象的属性存在

Why do dom-elements exist as properties on the window-object?

本文关键字：属性 存在 对象 窗口 dom-elements 为什么      更新时间：2023-09-26

如果我像这样写html：

<div id="foo">Foo<div>

window.foo 返回一个 dom-element window.document.getElementById("foo") === window.foo 返回 true 。

为什么？为什么每个人都使用getElementById？

还有一个旁注：为什么在IE7/8中禁止覆盖window.foo？如果我设置window.foo = "bar"会发生什么？

我不确定历史角度，但 HTML 5 指定元素是候选对象，如果它们具有 id 属性，则直接作为window对象的属性公开：

窗口接口支持命名属性。支持的属性 名称在任何时候都由以下内容组成，按树顺序排列，忽略 以后的重复：

[...]

  • 活动文档中具有非空 ID 内容属性的任何 HTML 元素的 ID 内容属性的值。

这个定义的问题在于，它只保证如果有<div id="foo">Foo<div>，那么window.foo将被定义。它不保证它的确切值是什么（阅读规范以了解如何确定的规则;例如，它可能会返回一个集合）。

因此，事实证明，"为什么要使用getElementById？"的答案很简单：因为您可以依靠它来返回您期望的内容，而无需考虑整个文档。

通常，在窗口对象中放置某些内容将使其全局化。例如：

var A = function() {
    window.test = "bla";
    console.log(test);
}
var B = function() {
    console.log(test);
}
A();
B();

但是，这不是一个好的做法。不应依赖任何全局对象，因为您可能希望将代码移动到没有窗口的浏览器。或者以nodejs为例。

我发现window.foo有点不对劲，因为您可能有创建名为foo的全局变量的代码。因此，使用 getElementById 可以确保您始终获得 DOM 元素。

Window.foo在您的场景中工作正常，但是如果Id是类似于"foo-test"而不是"foo"的东西，您可以看到它不起作用。 这是因为Javascript变量不允许在其中使用破折号。而在document.getElementById的情况下，它可以正常工作

相关文章：