Should I cache document.getElementById() in a variable or call it everytime?

caching, javascript, memory, performance

Solution

You should of course reuse the reference where possible, but you might need to get a new reference in each function body.

Example:

var e1 = document.getElementById('id1');
e1.innerHTML = 'test';
e1.className = 'info';

If you keep references longer, you may find that they no longer work. If you for example get innerHTML for a part of the page and stores it back, all elements in that part is removed and recreated. If you had a reference to one of the elements in that part, that element no longer exists.

// This will recreate all elements inside the 'parent' element:
document.getElementById('parent').innerHTML += 'test';

Problem

I'm having a lot of elements which are generated and referenced (mouseover, clicks, position changes) a lot of times. I have the ID's of those elements at hand. Is it wise to store the `document.getElementById(ID)` calls in a variable, or is it faster/just as fast/slower to call `document.getElementById()` everytime? ``` var app = []; var app.elements = []; //i can store ['id1', 'id2', 'id3'] //OR ['id1' => document.getElementById('id1'), 'id2' => document.getElementById('id2'), 'id3' => document.getElementById('id3')] ```

Original source