JavaScript DOM Tricks: Write Less Code and Do More

Stop Querying the DOM Repeatedly

Store references to frequently accessed elements.

Use Event Delegation

Handle events on a parent element instead of every clickable child:

document.querySelector(".list").addEventListener("click", (e) => {
  if (e.target.matches("li")) {
    console.log("Item clicked:", e.target.textContent);
  }
});

Use data-* Attributes to Store Metadata

<button data-id="42">Edit</button>
console.log(btn.dataset.id); // 42

Use Closest() for Smart Lookups

const card = el.closest(".card");

Always Defer JavaScript

Load JS after rendering to improve performance:

<script src="app.js" defer></script>

These patterns keep your scripts fast, readable and scalable.