为什么存在document.getElementById()函数？

Question

创建网页时，我一直使用函数。

var someVariable = document.getElementById('myID');

获取元素对象的引用。最近有人建议我不需要这样做，因为已经存在这样的变量。它的名称就等于id。我测试了一下，似乎可以工作。

<div id="myID">some text</div>
<a href="someplace" onclick="alert(myID.innerHTML)">click here</a>

这段代码可以正常运行，如预期一样弹出“some text”提示。但在Firefox错误控制台中会发出警告：

element referenced by ID/NAME in global scope. Use WC3 standard document.getElementById() instead....

目前我主要使用jQuery，但我需要向我的老板证明一点，否则我就得给他买盒巧克力:-)。有什么想法吗？为什么上面的代码不能工作或者使用它是一个非常错误的想法（Firefox中的警告还不够）？

感谢您的回答。

- Voooza

---

直接引用在IE和最近的Firefox版本中有效 :) - Sarwar Erfan

Answer 1

因为它是非标准的（但不久了）。虽然某些浏览器会将带有ID的元素分配给全局变量，但它们没有义务这样做（并非所有浏览器都这样做）。例如，旧版本的Firefox就不会表现出这种行为。还存在命名冲突的风险。

使用document.getElementById()确保在获取元素句柄时，所有浏览器都表现完全相同（嗯，或多或少咳咳）。

更多信息，请参见bobince的精彩答案类似问题。

- Andy E

---

据我所知，这个问题从未被标准化，只是得到了很好的支持。但是，有一些有效的id值不能通过window.X使用，例如"id"foo[bar]"。这是一个有效的HTMLid值，但是当你使用window["foo[bar]"]时，一些浏览器（例如Firefox）将无法找到该元素：http://jsbin.com/otoso4/2 - T.J. Crowder

@TJC，不，它还没有被标准化，但它在HTML5草案中（请参见更新的答案）。显然，监管委员会注意到大多数浏览器都是这样工作的，并决定它们都应该如此。在我看来，这是一个非常愚蠢的想法（就像规范中其他照猫画虎的部分一样）。 - Andy E

Answer 2

全局范围内引用ID/NAME的元素。请使用WC3标准document.getElementById()替代...

您当前的调用可能会导致变量冲突。

想象一下：

<script>
    var myID = 'foo'; 
</script>
<div id="myID">some text</div>
<a href="someplace" onclick="alert(myID.innerHTML)">click here</a>

myID现在不再是您的HTML元素，而是包含“foo”的变量。示例。

您应该始终使用document.getElementById()，因为它是专门用于检索HTML元素而不是JavaScript变量的特定函数。

- Aron Rotteveel

---

全局变量也会放在 window 对象中。 - Aistina

@Aistina：抱歉，我不知怎么地误读了你的回答。出于某种原因，我以为你在处理函数内部作用域，但除非你已经编辑了你的回答，显然你是在全局作用域下工作。对此我感到很抱歉。 - T.J. Crowder

Answer 3

可能是为了跨浏览器兼容性。第二个版本在Chrome中不起作用。这意味着它很可能也会在Safari中失败。

- xzyfer

---

很奇怪，当我尝试在Chrome中运行第二个版本时，它却起作用了。 - T.J. Crowder

我在这个页面上使用Webkit检查器进行了尝试。我正在运行开发版本，可能是因为这个原因。 - xzyfer

据我所知，它可以在所有主要浏览器的当前版本中正常工作。但是，在旧版Firefox中无法使用。 - Andy E