8 Hidden DOM Features You Didn’t Know Exist (And How to Use Them)

addEventListener options object

The third argument of addEventListener can be an options object instead of a boolean. The object may contain capture, once and passive properties:

element.addEventListener('click', handler, {
  capture: false,
  once: true,
  passive: false
});

once: true

automatically removes the listener after the first invocation, eliminating the need for removeEventListener or jQuery’s .one(). All modern browsers support this syntax except IE 11 and earlier.

Smooth scrolling with scrollTo()

Calling window.scrollTo(x, y) jumps instantly. Passing a ScrollToOptions object with behavior: 'smooth' triggers smooth scrolling.

window.scrollTo({
  top: 0,
  left: 1000,
  behavior: 'smooth'
});

The same options are accepted by Element.scrollTo(), scroll() and scrollBy(). Support is present in all current browsers; older IE versions lack the options object.

Optional arguments for setTimeout() and setInterval()

Both timer functions accept additional arguments that are forwarded to the callback, allowing data to be passed without creating a closure.

// Interval with extra arguments
let timer = window.setInterval(doSomething, 3000, 10, 20);
function doSomething(a, b) {
  // a === 10, b === 20
}

// Timeout with extra arguments
let btn = document.querySelector('button');
let output = document.querySelector('output');
let a = 5, b = 7;
btn.addEventListener('click', () => {
  output.textContent = 'Calculating…';
  setTimeout(doSomething, 2000, a, b);
});
function doSomething(a, b) {
  output.textContent = a + b;
}

These features are supported in all major browsers, including IE 10.

Checked vs. defaultChecked for radio buttons and checkboxes

The checked property reflects the current state; defaultChecked reflects the initial HTML state.

// Accessing current state
console.log(radioButton.checked); // true or false
radioButton.checked = false;

// Accessing the initial state (HTML markup)
for (let input of form.elements.myGroup) {
  if (input.defaultChecked) {
    console.log('Initially selected:', input.value);
  }
}

Typical markup (shown inside a code block) looks like:

<form id="myForm">
  <input type="radio" name="group" value="one"> One
  <input type="radio" name="group" value="two" checked> Two
  <input type="radio" name="group" value="three"> Three
</form>

Normalizing adjacent text nodes

When multiple adjacent text nodes exist, element.normalize() merges them into a single node. If you need the combined string without merging, use the wholeText property on any of the adjacent nodes.

let el = document.getElementById('el');
el.appendChild(document.createTextNode(' Some more text.'));
console.log(el.childNodes.length); // 2
console.log(el.childNodes[0].wholeText); // "Initial text. Some more text."

el.normalize();
console.log(el.childNodes.length); // 1

insertAdjacentElement() and insertAdjacentText()

Both methods accept the same position strings: beforebegin, afterbegin, beforeend, afterend. insertAdjacentElement moves an existing element; insertAdjacentText inserts raw text (HTML entities are escaped).

// Move an element
let target = document.getElementById('target');
let mover = document.getElementById('mover');
target.insertAdjacentElement('beforebegin', mover);

// Insert plain text
let paragraph = document.getElementById('para');
paragraph.insertAdjacentText('beforeend', 'Appended plain text');

Accessing event.detail on UI events

For UI events such as click, dblclick, mousedown, the event.detail property reports the click count (1 for single click, 2 for double‑click, etc.). This can be used to differentiate between single, double or triple clicks.

button.addEventListener('click', e => {
  console.log('Click count:', e.detail);
});

Scroll dimensions: scrollHeight / scrollWidth vs. offsetHeight / offsetWidth

offsetHeight

and offsetWidth report the rendered size of an element, ignoring overflow. scrollHeight and scrollWidth include the total scrollable area, so they return larger values when content overflows.

let el = document.querySelector('.col1');
console.log('offsetHeight:', el.offsetHeight);
console.log('scrollHeight:', el.scrollHeight);

The same logic applies horizontally with offsetWidth and scrollWidth.

Summary

The eight native DOM features covered above—options object for addEventListener, smooth scrolling via scrollTo, extra arguments for timer functions, checked / defaultChecked, normalize / wholeText, insertAdjacentElement / insertAdjacentText, event.detail, and scroll dimension properties—are all supported by modern browsers and can simplify everyday web‑development tasks without requiring external libraries.