当我可以在 JavaScript 中直接引用 DOM id 时，为什么还要使用 document.getElementById？ [复制]答案

【问题标题】：Why use document.getElementById when I can directly refer to the DOM id in JavaScript? [duplicate]当我可以在 JavaScript 中直接引用 DOM id 时，为什么还要使用 document.getElementById？ [复制]
【发布时间】：2013-01-06 20:05:28
【问题描述】：

可能重复：
IE/Chrome: are DOM tree elements global variables here?

我最近发现我可以在 javascript 中使用来自 DOM 并直接引用其 id 的任何对象：

<div id="layer">IM A LAYER</div>
<script>
   alert(layer.innerHTML);
</script>

如果这是真的，使用 getElementById 方法有什么好处？

【问题讨论】：

var layer = "OMG WTF"; alert(layer.innerHTML)
"这很糟糕，因为现在您必须避免以您（或项目中的任何其他库代码）可能想要使用的文档或窗口对象的任何成员命名您的元素。 " stackoverflow.com/questions/3434278/…
此问题并非特定于元素 id，而是与变量的全局范围有关。这很容易处理具体的范围变量，可以通过 function() {}(); 的范围来处理；

标签： javascript dom getelementbyid

【解决方案1】：

如果元素不存在，直接访问 DOM 元素会报错。而如果你使用getElementById，它将返回NULL。

您也不能直接访问所有元素，例如，如果它们的名称中有破折号 (some-id)，因为 JS 变量不能包含破折号。但是，您可以使用 window['some-id'] 访问它们。

【讨论】：

【解决方案2】：

例如，如果在您的页面中，您在其他地方有另一个先前的脚本

<script>
var layer = false; // or any other assignment
</script>

layer 将引用window.layer，然后layer.innerHTML 将失败。使用document.getElementById，您将避免这个棘手的错误

【讨论】：

getElementById 当具有该 id 的元素会像直接访问一样棘手的错误条件（未定义）。就像我在这里看不到棘手的OP一样。请证明我错了。

【解决方案3】：

这仅适用于id 包含允许用于变量名的字母。对于像 text-11 或 item-key-21 这样的 id，它将不起作用。

【讨论】：