// This is slow, it accesses the DOM element multiple times document.querySelector('#my-element').classList.add('my-class'); document.querySelector('#my-element').textContent = 'hello'; document.querySelector('#my-element').hidden = false; // This is faster, it stores the DOM element in a variable const myElement = document.querySelector('#my-element'); myElement.classList.add('my-class'); myElement.textContent = 'hello'; myElement.hidden = false;
Note that, while this trick may come in handy, it comes with the caveat that if you later remove the DOM element and you still have it stored in a variable, the variable should be set to
null to avoid potential memory leaks.
A collection of quick tips and tricks to level up your coding skills one step at a time.
Renders the given DOM tree in the specified DOM element.
Runs a function in a separate thread by using a Web Worker.
Adds multiple event listeners with the same handler to an element.