javascript - 为什么我不应该更多地访问元素 "directly"(elemId.innerHTML)

Question

我见过一些访问 HTML 元素的 JavaScript 代码，如下所示:elementID.innerHTML，它确实有效，尽管实际上我搜索的每个教程都使用 document.getElementById()。我什至不知道是否有短寻址的术语。

起初我简单地认为每个 id 的 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;

“short”方法看起来是个不错的捷径，但我觉得它有问题，因为它几乎没有出现在教程中。

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

Answer 1

Why shouldn't I access elements more “directly” (elemId.innerHTML)

因为，根据该线程中的其他人的说法，不完全支持通过 id 名称任意引用。

因此，我认为您应该做的是将他们的选择存储到一个 var 中，然后引用该 var。

试试看

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

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

请注意，javascript 库倾向于添加 shim 函数以增加跨浏览器的通用函数支持。这将有利于使用，例如，jquery 的选择器而不是纯 javascript。但是，如果您实际上担心内存/性能，原生 JS 通常会赢得速度测试。 (jsperf.com 是测量速度和进行比较的好工具。)