我应该在变量中缓存document.getElementById()还是每次都调用它？

Question

我有很多次生成和引用的元素(鼠标悬停,点击,位置变化).

我手头有这些元素的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')]

Answer 1

您当然应该尽可能重用引用,但您可能需要在每个函数体中获得一个新引用.

例:

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';