为什么dom-elements作为window-object的属性存在？

Question

如果我写这样的HTML：

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

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

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

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

Answer 1

我不确定历史观点，但HTML 5 specifies如果window对象具有id属性，那么这些元素可以直接作为属性直接公开：< / p>

  

Window界面支持命名属性。支持的属性   任何时刻的名称都包含以下内容，按树顺序忽略   稍后重复：

     

[...]

     

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

此定义的问题在于，它只保证如果存在<div id="foo">Foo<div>，则会定义window.foo 。它不保证它的值究竟是什么（阅读关于如何确定的规则的规范;例如，it might return a collection）。

所以事实证明“为什么要使用getElementById？”很简单：因为您可以依赖它来返回您的期望，而无需考虑整个文档。

Answer 2

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

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

A();
B();

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

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

Answer 3

Window.foo在你的场景中工作正常，但如果Id是这样的“foo-test”而不是“foo”，你可以看到它不起作用。这是因为其中的破折号不允许使用Javascript变量.... 而对于document.getElementById

，它将正常工作