javascript - 为什么 dom 元素作为属性存在于窗口对象上？

Question

如果我这样写html：

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

window.foo返回一个 dom 元素并window.document.getElementById("foo") === window.foo返回true.

这是为什么？为什么每个人都使用getElementById?

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

score 5 · Accepted Answer

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

Window 接口支持命名属性。任何时候支持的属性名称都包含以下内容，按树顺序排列，忽略后面的重复项：

[...]

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

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

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

score 0 · Accepted Answer

一般来说，在window对象内放置一些东西会使它成为全局对象。例如：

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

A();
B();

然而，这不是一个好习惯。您不应该依赖任何全局对象，因为您可能希望将代码移动到没有window的浏览器。或者以 nodejs 为例。

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

score 0 · Accepted Answer

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

3 回答 3