javascript - 我应该将 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';