为啥 dom 元素作为属性存在于窗口对象上？ [复制]

Posted 2023-02-21

【中文标题】为啥 dom 元素作为属性存在于窗口对象上？ [复制]

【英文标题】：Why do dom-elements exist as properties on the window-object? [duplicate]为什么 dom 元素作为属性存在于窗口对象上？ [复制]

【发布时间】：2013-09-13 19:54:55

【问题描述】：

如果我这样写html：

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

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

这是为什么呢？还有为什么大家都用getElementById？

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

【问题讨论】：

看了一圈后发现还有这个：

感谢@Jon 的快速回答 - 以及我没有找到的“重复”。

【参考方案1】：

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

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

[...]

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

这个定义的问题在于它只保证如果有<div id="foo">Foo<div>，那么window.foo就会被定义。它不保证它的确切值是多少（阅读规范以了解如何确定它的规则；例如，it might return a collection）。

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

【参考方案2】：

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

【讨论】：

window["foo-test"].

是的，在这里你得到了哈希表并通过键在其中搜索，但是直接将它作为对象访问会产生问题，试试这个： var foo-test = 'hi';警报（window.foo-test）；

技术上window.foot也是在哈希表中按键搜索。

@AbhishekJain：“按键搜索哈希表”和“直接作为对象访问”是您选择使用的表达式。在这两种情况下实际发生的情况完全相同，只是语法不同。当然你不能使用window.foo-test，但这仍然不能回答“为什么使用getElementById？”的问题。

@Jon 谢谢你的信息..

【参考方案3】：

一般来说，在 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 元素。