DOM Manipulation with JavaScript

The Document Object Model (DOM) is a programming interface for HTML documents. When a browser loads an HTML page, it parses the markup and constructs an in-memory tree of objects — the DOM — where every element, attribute, and piece of text becomes a node. JavaScript can then read and modify this tree, and the browser reflects those changes in what is displayed on screen.

Why the DOM matters

Without the DOM, JavaScript would have no structured way to interact with a page's content. The DOM is what makes web pages dynamic:

• Read data from the page (form values, attributes, text content)
• Create, insert, move, or remove elements
• Respond to user events (clicks, keyboard input, scroll)
• Change styles and classes to update appearance without a page reload
• Communicate changes back to the server via fetch and reflect the result instantly

The DOM tree structure

The root is document. Below it is the element, which has and `as children. Every HTML element becomes anElementnode; text inside an element becomes aTextnode; HTML comments becomeCommentnodes. The entire structure is traversable via properties likeparentNode,children,firstElementChild, andnextElementSibling`.

Virtual DOM vs. real DOM

Frameworks like React introduced the Virtual DOM: a lightweight JavaScript representation of the DOM. The framework diffs the virtual tree and applies only the minimal real DOM changes needed. This batching is a performance optimisation — direct DOM manipulation is relatively slow because it can trigger layout recalculations (reflows) and repaints.

Modern APIs

document.querySelector() and document.querySelectorAll() have replaced getElementById and getElementsByClassName for most use cases, offering CSS selector syntax and consistent return types. MutationObserver watches for DOM changes without polling. IntersectionObserver detects when elements enter or leave the viewport.

Adding elements

The modern approach uses createElement to build the element, configure it, then append or insertAdjacentElement to place it:

const li = document.createElement('li');
li.textContent = 'New item';
li.classList.add('list-item');

const ul = document.querySelector('.my-list');
ul.append(li);                          // adds at the end
ul.prepend(li);                         // adds at the start
ul.insertAdjacentElement('beforeend', li); // flexible positioning

append() is preferred over the older appendChild() because it accepts both nodes and strings, and can append multiple items at once.

For inserting relative to a sibling:

const reference = document.querySelector('.existing-item');
reference.after(li);   // inserts after the reference element
reference.before(li);  // inserts before it

Removing elements

The modern API is simply .remove() on the element itself:

const el = document.querySelector('.to-remove');
el.remove();

The older pattern — el.parentNode.removeChild(el) — still works but is more verbose and is rarely used in new code.

Cloning elements

const clone = original.cloneNode(true); // true = deep clone including children
container.append(clone);

Performance consideration

When inserting many elements at once, use DocumentFragment to batch DOM insertions and avoid repeated reflows:

const fragment = document.createDocumentFragment();
items.forEach(text => {
  const li = document.createElement('li');
  li.textContent = text;
  fragment.append(li);
});
document.querySelector('ul').append(fragment);

Common gotcha: innerHTML = '' clears a container quickly but removes all event listeners attached to child elements. If those listeners are not cleaned up separately, this causes memory leaks. Use replaceChildren() or .remove() on individual children when listener cleanup matters.

When a user interacts with an element (a click, keypress, focus, etc.), the browser does not immediately fire the event just on that element. Instead it travels through three phases: capturing, target, and bubbling.

Event Capturing (capture phase)

The event starts at document and travels down through the DOM tree toward the target element. Listeners registered with { capture: true } (or the third argument true) fire during this downward journey:

document.addEventListener('click', handler, { capture: true });

Capturing is rarely used in application code but is useful for intercepting events before they reach their target — for example, in UI frameworks that need to detect clicks outside a modal.

Target phase

The event reaches the element it was originally fired on. Both capture and bubble listeners on the target itself fire at this phase.

Event Bubbling (bubble phase)

After reaching the target, the event bubbles back up through ancestor elements to document. This is the default: listeners registered without { capture: true } fire during bubbling:

document.querySelector('.button').addEventListener('click', handler);
// fires during bubbling

Most DOM events bubble. Notable exceptions: focus, blur, load, scroll, and mouseenter/mouseleave do not bubble (though focusin/focusout do).

Stopping propagation

• event.stopPropagation() — prevents the event from travelling further up (or down in capture) the DOM.
• event.stopImmediatePropagation() — also prevents other listeners on the same element from firing.

Event delegation

Bubbling enables event delegation: attach a single listener to a parent element instead of individual listeners on each child. This is more memory-efficient and works for dynamically added children:

document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.matches('li')) {
    console.log('Clicked:', e.target.textContent);
  }
});

e.target is the element that was actually clicked; e.currentTarget is the element the listener is attached to.

There are several ways to read and modify HTML element attributes with JavaScript. The right approach depends on whether you are working with a standard reflected property or an arbitrary attribute.

setAttribute and getAttribute

The general-purpose methods that work for any attribute:

const img = document.querySelector('#avatar');
img.getAttribute('src');            // read
img.setAttribute('src', 'new.jpg'); // write
img.removeAttribute('alt');         // remove
img.hasAttribute('data-active');    // check existence

Direct property access (preferred for standard attributes)

Many HTML attributes are reflected as DOM element properties. Accessing the property is faster, type-safe, and idiomatic:

const input = document.querySelector('input');
input.value = 'hello';        // not setAttribute('value', ...)
input.disabled = true;
input.type = 'email';

const link = document.querySelector('a');
link.href = 'https://example.com'; // returns absolute URL

Note: getAttribute('href') returns the literal attribute value (e.g., /page), while .href returns the resolved absolute URL. This distinction matters when reading links.

data-* attributes and dataset

Custom data- attributes are accessed through the dataset property, which automatically converts kebab-case to camelCase:

// <div>
const el = document.querySelector('div');
el.dataset.userId;       // "42"
el.dataset.role;         // "admin"
el.dataset.userId = '99'; // sets data-user-id="99"

classList for class attributes

For the class attribute specifically, always use classList rather than setAttribute('class', ...), which overwrites all existing classes:

el.classList.add('active');
el.classList.remove('hidden');
el.classList.toggle('open');
el.classList.contains('selected'); // boolean
el.classList.replace('old', 'new');

Modern selector

Prefer document.querySelector over document.getElementById for new code — it is more flexible and returns null (not undefined) when no match is found.