Nice summary! I recently learned something new that you can do to avoid. a bunch of document.getElementById() calls. You can create a tiny Proxy and get a single object that effectively gives you direct access to every element with an id, like this:
<h1 id="welcomeMessage" hidden>Welcome!</h1>
const elements = new Proxy({}, {
get(target, prop) {
return document.getElementById(prop);
}
});
elements.welcomeMessage.hidden = false;
Nice summary! I recently learned something new that you can do to avoid. a bunch of
document.getElementById()calls. You can create a tiny Proxy and get a single object that effectively gives you direct access to every element with an id, like this:// Given this HTML... <h1 id="welcomeMessage" hidden>Welcome!</h1> // Elements Proxy (make this a global, a module, or just add it to the top of your script) const elements = new Proxy({}, { get(target, prop) { return document.getElementById(prop); } }); elements.welcomeMessage.hidden = false;