Javascript“未定义”变量获取匹配的HTML对象[重复]答案

【问题标题】：Javascript "undefined" variable gets the matching HTML object [duplicate]Javascript“未定义”变量获取匹配的HTML对象[重复]
【发布时间】：2014-02-06 10:47:27
【问题描述】：

我有点困惑。假设我有以下 HTML 代码：

<div id="foo"></div>

如果我这样写：

var bar = foo;
console.log(bar);

然后我会得到这个作为输出——令人惊讶的是，带有“foo”ID 的 DOM 元素：

<div id="foo"></div>    // Chrome
[object HTMLDivElement] // FireFox

这种行为有什么具体原因吗？还是我的设置有问题？其他人也可以重现这个吗？如果它是正确的行为，我们应该何时以及如何使用它？

更新

我看到这里有一个类似的问题，但并非所有问题都已在此处得到解答。我在那里看到的答案大多是关于 IE 特定的事情，这不是真的——至少现在是这样。

JSFiddle

【问题讨论】：

@elclanrs 我现在看到了这个问题，但答案有点差。我希望我能在这里得到更好的。并非我所有的问题都在那里得到解答。但感谢您指出。
伙计们，至少去阅读那里的所有答案。这不完全是我想要的。很遗憾看到您关闭问题的速度有多快。说真的，去阅读另一个问题中的所有答案。

标签： javascript browser

【解决方案1】：

因为每个命名元素都成为window 对象的全局属性。

所以如果你给一个元素一个id，那么你也可以通过window对象访问它

<div id="foo"></div>

对于上面的元素，你可以这样写

console.log(foo);

相当于

console.log(window.foo);

【讨论】：

感谢您的回答，我希望在这里得到更多的答案，但它现在已经关闭。你知道应该在哪里使用它而不是使用原生 DOM 方法吗？这种访问 DOM 元素的方式是否存在与性能相关的问题？有什么建议可以避免这种情况吗？
@Mahdi 创建一个 html，其中包含一些 id'd/named/class'd 为“foo”的东西。在您的控制台中，输入“foo”并查看它为您提供的信息。在我的中，它给了我一个名为 foo 的所有东西的数组。这至少是不使用它的一个原因；如果您的表单名称与 ids 或 classes 名称相同，那么您将遇到麻烦。这也是浏览器不一致。以上在 chrome 中有效，但在 Firefox 中似乎无效。
@Sachin 谢谢你的解释，我也这么认为。