javascript 直接引用 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7826737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Directly reference HTML elements
提问by Sam Shiles
Possible Duplicate:
IE/Chrome: are DOM tree elements global variables here?
why window[id] === document.getElementById( id )
可能的重复：
IE/Chrome：这里是 DOM 树元素全局变量吗？
为什么 window[id] === document.getElementById( id )
I've just come across something in html/javascript which has surprised me a bit. When obtaining a reference to an html element, using javascript, I have always previously used either jQuery or document.getElementById. It also appears that you can directly access a element simply by using it's id. Can someone explain the nuances of this? I've googled but cannot find any reference to this ability, every site talks about getElementById.
我刚刚在 html/javascript 中遇到了一些让我感到惊讶的东西。在使用 javascript 获取对 html 元素的引用时，我以前一直使用 jQuery 或 document.getElementById。似乎您也可以通过使用元素的 id 直接访问元素。有人可以解释这其中的细微差别吗？我用谷歌搜索但找不到任何关于此功能的参考，每个站点都在谈论 getElementById。
The following page snippet illustrates this.
以下页面片段说明了这一点。
<html>
<head>
</head>
<body>
<input type="button" value="getElement" onclick="document.getElementById('blah').innerText = 'getElementById'" />
<input type="button" value="direct" onclick="blah.innerText = 'direct';" />
<div id="blah"></div>
</body>
Many thanks in advance.
提前谢谢了。
采纳答案by zzzzBov
Being able to select elements on the page based on their [id]is a "feature" from early JavaScript (DOM lvl 0 or 1 methinks, can't seem to find the source).
能够根据元素选择页面上的元素[id]是早期 JavaScript 的一个“功能”（DOM lvl 0 或 1 我认为，似乎无法找到源）。
Unfortunately it's a temperamental feature. What would happen if you had:
不幸的是，这是一个气质特征。如果你有：
<div id="window"></div>
or
或者
<div id="document"></div>
Better yet, what happens here?
更好的是，这里会发生什么？
<div id="foo"></div>
<div id="bar"></div>
<script>var foo = document.getElementById('bar');</script>
So the nuances to calling an element based on it's [id]is simply this:
因此，基于它调用元素的细微差别[id]很简单：
Don't use it.
不要使用它。
It's not consistent, and not guaranteed to receive future support.
它不一致，并且不能保证获得未来的支持。
Personally I'd like to see this "feature" go the way of document.all. It only causes more issues than it solves, and document.getElementById, while certainly verbose, is meaningful and understandable.
我个人希望看到这个“功能”像document.all. 它只会引起比解决的问题更多的问题，并且document.getElementById虽然冗长，但有意义且易于理解。
回答by Blazemonger
Using getElementByIdis more flexible and readable. For instance, this won't work:
使用getElementById更加灵活和可读。例如，这行不通：
<input type="button" value="direct" onclick="document.innerText = 'direct';" />
<div id="document"></div>
for obvious reasons, but this will:
出于显而易见的原因，但这将：
<input type="button" value="getElement" onclick="document.getElementById('document').innerText = 'getElementById'" />
<div id="document"></div>
and it's more clear to other developers what's really going on.
其他开发人员更清楚真正发生了什么。
回答by Davy8
I don't believe it's a documented feature, and it doesn't appear to work in Firefox (6), but it appears to work in the latest version of Chrome, as well as IE 6-9.
我不相信它是一个记录在案的功能，它似乎不适用于 Firefox (6)，但它似乎适用于最新版本的 Chrome，以及 IE 6-9。
I wouldn't rely on it, and would just consider it one of the oddities of browsers features.
我不会依赖它，只会认为它是浏览器功能的奇怪之处之一。
