Question

我已经看到一些JavaScript代码来访问这样的HTML元素：elementID.innerHTML，它可以工作，但实际上我搜索的每个教程都使用document.getElementById()。我甚至不知道是否有短期寻址的术语。

起初我简单地认为每个id'ed HTML元素都直接位于window下，但使用getParent()显示树结构在那里，所以我想要的元素嵌套并不重要。我写了一个简短的测试用例：

http://jsfiddle.net/hYzLu/

<div id="fruit">Mango<div id="color">red</div></div>
<div id="car">Chevy</div>
<div id="result" style="color: #A33"></div>

result.innerHTML = "I like my " + color.innerHTML + " " + car.innerHTML;

“短”方法看起来像一个很好的快捷方式，但我觉得它有问题，因为它实际上没有出现在教程中。

为什么document.getElementById()是首选，或者在某些情况下甚至可能需要？

Answer 1

我猜是更安全。如果你在同一个上下文中有一个名为result的变量result.HTML我很确定浏览器会抛出一个摇摆器。在这个实例中以document.getElementById()的方式执行此操作显然会为您提供相关的DOM元素。

另外，如果您是动态地将HTML添加到页面我可能是错的，但您可能会遇到result的意外行为：）

Answer 2

为什么我不应该“直接”访问元素（elemId.innerHTML）

因为，根据此主题中的其他人，不完全支持id名称任意引用。

所以，我认为你应该做的是将他们的选择存储到var中，然后引用var。

尝试改为

var color = document.getElementById('color');
color.innerHTML = 'something';

这样做是件好事的原因是在DOM中执行查找是一个昂贵的过程，内存明智。因此，如果将元素的引用存储到变量中，它将变为静态。因此，每次要.doSomething()时，您都不会执行查找。

请注意，javascript库倾向于添加填充函数以增加跨浏览器的一般功能支持。这对于使用jquery的选择器而不是纯javascript是有好处的。但是，如果你实际上担心内存/性能，本机JS通常会赢得速度测试。（jsperf.com是测量速度和进行比较的好工具。）

Answer 3

此外，我将补充说，并非所有ID都可以具有不能用作变量名称的值。例如，如果您的ID是“nav-menu”。

虽然我想你可以写一个窗口[“nav-menu”]。innerHTML

这让我想到，如果您创建一个与ID同名的窗口级变量会发生什么？查看此jsfiddle（在chrome中测试）：http://jsfiddle.net/8yH5y/

这看起来真是一个坏主意。只需使用document.getElementById（“id”）并将结果存储到变量中，如果您将多次使用该引用。

为什么我不应该“直接”访问元素（elemId.innerHTML）

3 个答案: