我有很多次生成和引用的元素（鼠标悬停，点击，位置变化）。
我手头有这些元素的ID。存储它是明智的 document.getElementById(ID) 调用变量，或者更快/更快/更慢调用 document.getElementById() 每次？
var app = [];
var app.elements = [];
//i can store ['id1', 'id2', 'id3']
//OR ['id1' => document.getElementById('id1'), 'id2' => document.getElementById('id2'), 'id3' => document.getElementById('id3')]
您当然应该尽可能重用引用，但您可能需要在每个函数体中获得一个新引用。
例：
var e1 = document.getElementById('id1');
e1.innerHTML = 'test';
e1.className = 'info';
如果您保留更长时间的引用，您可能会发现它们不再有效。例如，如果您为页面的一部分获取innerHTML并将其存储回来，那么该部分中的所有元素都将被删除并重新创建。如果您对该部分中的某个元素有引用，则该元素不再存在。
// This will recreate all elements inside the 'parent' element:
document.getElementById('parent').innerHTML += 'test';
getElementById 返回一个元素节点，它本质上只是一个JavaScript对象。您可以将此对象分配给变量，这意味着只要您在稍后阶段键入该变量，该变量就会指向此对象。所以，
var id1 = document.getElementById('id1');
id1 现在引用带有的DOM元素 id 的 id1。如果没有找到任何元素 id 然后 document.getElementById 返回null。
如果元素保留在DOM中并且没有被替换，那么将它们存储在数组中是有意义的，这样您就可以根据需要多次引用它们而无需任何性能成本。
如果有帮助，您可以创建一个简单的功能来为您完成：
function getElementsByIds( /* id1, id2 ... */ ) {
var elems = [];
for (var i = 0, l = arguments.length; i < l; i++) {
elems[i] = document.getElementById(arguments[i]);
}
return elems;
}
app.elements = getElementsByIds('id1', 'id2', 'id3');
这个问题没有一个正确的答案。这一切都取决于你必须与之合作。如果您正在使用DOM树中包含大量元素的页面，则最好缓存引用并重用它们，以加快查找时间。如果您正在处理一个小页面，最好动态查找元素，并最大限度地减少浏览器的内存消耗。
它还取决于您要定位的浏览器。例如，较新版本的Firefox需要一段时间才能对元素进行第一次细化，但它们会在内部缓存引用，因此下次您要查找它时，它几乎是即时的。另一方面，IE不会缓存查找值，但是第一次尝试时它的搜索时间比Firefox要快得多。
许多现代框架将缓存您找到的元素。但是，我个人仍然更喜欢在大多数时候使用document.getElementById。我需要缓存查找值时的操作如下：
function registerElement(id)
{
if (!this["get_" + id])
this["get_" + id] = function() {
var element = document.getElementById(id);
this["get_" + id] = function() {return element;};
return element;
}
}
您可以通过调用registerElement并向其传递元素的ID来使用它。当你需要检索值时，你调用你传递的get_element id，在第一次运行时它将查找元素并缓存它，在每次连续调用时它将只返回缓存值。
将元素存储在变量中肯定会更快，但不是很大。这种情况因个案而异，应根据每个情况进行调整。
也许最重要的因素是易读性，我相信直接访问元素更具可读性。
theMainButton.style.color = "red";
// vs.
document.getElementById("theMainButton").style.color = "red";