为什么在javascript中使用隐式id引用是不好的做法？

Question

我已经看到并避免了这样的代码：

<div id="myDiv" onClick="alert('hi!');">Div</div>
<script>
    myDiv.click();  // <-- this bit seems wrong
</script>

我觉得我应该单独通过它的id引用节点而不首先明确地将它分配给变量。像这样：

var myDiv = document.getElementById('myDiv');

我们不应该像第一个例子那样使用代码，或者我只是迷信，这是否有充分的理由？

Answer 1

使用页面中的标识符而不指定它们的来源是不好的做法。

标识符被“神奇地”创建为文档对象中的属性。如果你使用它们，那么它们最初是如何到达那里的并不是很明显。如果你重命名该元素，相同的Javascript代码现在会创建一个全局变量，并且通过查看代码应该做什么以及为什么它不再工作很难看到。

此外还存在冲突风险。如果您创建一个与元素ID同名的全局变量，那么它将隐藏元素，您将无法再访问它。

通过使用getElementById，代码清楚地表明页面中应该有一个带有该id的元素，并且它也只查找元素，因此命名冲突的风险较小。

Answer 2

感谢Bergi和Pete提供有关此主题的有用信息的链接。

从这些我收集到的，为什么这是不好的做法有几个主要原因：

1. 所有浏览器都不支持它（虽然html5采用隐式引用这种方法，但这可能不是一个问题）。
2. 命名空间冲突 - 引用将作为此窗口对象的属性。如果存在名称与id相同的窗口属性，则可能不会分配该属性。
3. 由于第2点，如果浏览器引入了与您的某个ID同名的属性，您的代码可能会意外中断。

Answer 3

首先，这是一种不好的做法，因为维护此类代码非常困难，请考虑script不在元素旁边，甚至不在同一文件中。

此外，当您的HTML页面/应用程序增长时，建议不要使用id。 id属性必须保持唯一，您可能会发现很难遵循它