为什么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>

此代码有效，它会按预期警告“某些文本”。 firefox错误控制台中只有一个警告：

  

在全局范围内由ID / NAME引用的元素。使用WC3标准document.getElementById（）代替....

我现在大部分都在使用jQuery，但我需要在工作中向老板证明一点，否则我将不得不给他买一盒巧克力:-)。

任何想法为什么上层代码不起作用或为什么使用它是一个非常错误的想法（在Firefox中警告是不够的）???

感谢您的回答

Answer 1

  

任何想法为什么上层代码不起作用或为什么使用它是一个非常错误的想法（在Firefox中警告是不够的）???

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

使用document.getElementById()确保所有浏览器在获取元素句柄时的行为完全相同（好吧，或多或少 cough ）。

有关详情，请参阅bobince's excellent answer类似问题。

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'的变量。 Example.

您应始终使用document.getElementById（），因为它是为特定函数构建的，用于检索 HTML元素而不是JavaScript变量。

Answer 3

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