10.8 — DOM Interfaces & the C++ Binding Layer

The JS‑to‑Engine Bridge

JavaScript’s memory space is completely isolated from the C++ engine that owns the DOM. When the parser creates a node, it instantiates a native C++ object. To let JavaScript touch that node, the engine creates a V8 wrapper (or equivalent) – a thin JavaScript object holding nothing but an internal pointer to the real C++ element.

Every property read or method call must cross this boundary. The wrapper marshals arguments, converts data types, and passes execution to the C++ side. The result then travels back. This crossing is not free; it introduces overhead. Tight loops that hit the bridge thousands of times can saturate the main thread and cause jank.

The Interface Inheritance Chain

Every DOM node sits on a precise rung of a strict inheritance ladder. From top to bottom:

• EventTarget – the primal root. Provides addEventListener, removeEventListener, dispatchEvent. No concept of tags, text, or layout.
• Node – adds structural tree relationships: parentNode, childNodes, nextSibling, and mutation methods like appendChild.
• Element – narrows to tags; introduces attributes (getAttribute, setAttribute), class lists, and geometry (getBoundingClientRect, clientWidth).
• HTMLElement – adds HTML‑specific global properties: tabIndex, hidden, dir, style, dataset.
• Concrete Interfaces – leaf classes like HTMLInputElement (value, validation, selection) and HTMLTemplateElement (content, fragment) that implement the specific behaviour of each tag.

For example, HTMLTemplateElement stores its internal markup inside a detached DocumentFragment – a quarantined subtree that does not render, does not load resources, and does not execute scripts until cloned.

Live vs. Static Collections

Methods like getElementsByClassName or the children property return an HTMLCollection – a live collection. It is not a static snapshot; it is a live window onto the current DOM. Each time you read .length or access an index, the engine may need to re‑walk the tree to ensure the result is up‑to‑date.

This becomes catastrophic inside loops that modify the DOM. Each iteration invalidates the collection’s internal cache, forcing a full re‑scan. This is known as synchronous layout thrashing.

In contrast, querySelectorAll returns a static NodeList. The engine walks the DOM once, gathers the matching wrappers, and freezes them. No matter how many elements you later add or remove, the NodeList remains unchanged, and accessing its length is a cheap, constant‑time operation.

// Live – slow if DOM changes during loop
const liveItems = document.getElementsByClassName('item');
for (let i = 0; i < liveItems.length; i++) {
    liveItems[i].classList.add('processed'); // dangerous re‑scan
}

// Static – safe and fast
const staticItems = document.querySelectorAll('.item');
staticItems.forEach(item => item.classList.add('processed'));