Unlocking Hidden Gems in the DOM

Efficient Event Handling with the once Option

As web developers, we often focus on the latest and greatest tools and technologies. However, there are many powerful features built right into the Document Object Model (DOM) that can help us create more efficient, effective, and engaging web applications.

One such feature is the once option for addEventListener(). When using addEventListener(), you may want to limit an event to firing only once. The once option allows you to do just that. By setting once to true, the event will only run once on the targeted element and then be removed.

element.addEventListener('click', function() {
  console.log('Clicked!');
}, { once: true });

More Hidden Gems to Explore

In addition to the once option, there are many other lesser-known DOM features that have strong browser support. Here are seven more:

• Element.scrollIntoView(): Scrolls an element into view.
• Element.getBoundingClientRect(): Returns the size and position of an element.
• Document.execCommand(): Executes a command on the current selection or cursor position.
• HTMLInputElement.reportValidity(): Returns a boolean indicating whether the input element’s value is valid.
• NodeList.forEach(): Iterates over a NodeList, calling a provided function for each element.
• Range.getBoundingClientRect(): Returns the size and position of a range of text.
• Window.matchMedia(): Returns a MediaQueryList object that can be used to monitor the state of a CSS media query.

By leveraging these hidden gems, you can create more efficient, effective, and engaging web applications without relying on external libraries or frameworks.