Skip to content

The DOM API

Basic DOM Manipulation Concepts

DOM manipulation allows developers to:

Access elements within an HTML document.
Create new elements and add them to the document.
Modify the content, structure, attributes, and styles of HTML elements on a webpage.
Modify content, attributes, and styles.
Respond to user interactions (e.g., clicks, keypresses).

Accessing DOM Elements

`getElementById(id)`

Gets the first element with the specified id.
Returns an HTMLElement or null if no match is found.

const element = document.getElementById("elementId");
console.log(element); // <div id="elementId">...</div>

javascript

`getElementsByClassName(className)`

Returns a live HTMLCollection of all elements with the specified class name.

const elements = document.getElementsByClassName("myClass");
console.log(elements[0]); // First element with class "myClass"

javascript

`getElementsByTagName(tagName)`

Returns a live HTMLCollection of elements with the specified tag name.

const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // Number of <p> elements

javascript

`querySelector(selector)`

Returns the first element matching a CSS selector.
Returns null if no match is found.

const div = document.querySelector(".myClass");
console.log(div); // First element with class "myClass"

javascript

`querySelectorAll(selector)`

Returns a static NodeList of all elements matching a CSS selector.

const items = document.querySelectorAll("li.active");
items.forEach(item => console.log(item.textContent));

javascript

`getRootNode()`

Returns the root node of the document (typically the <html> element).

const root = document.getRootNode();

javascript

`closest(selector)`

Finds the closest ancestor (or itself) of an element that matches the given selector.

const element = document.querySelector('.child').closest('.parent');

javascript

Setting Content

`element.innerHTML`

Gets or sets the HTML content inside an element.

const div = document.getElementById("myDiv");
div.innerHTML = "<p>New content</p>";

// To clear the content of an HTML element.
div.innerHTML = "";  // This will remove all child elements and text.

javascript

`element.textContent`

Gets or sets the text content of an element (ignores HTML tags).

const p = document.querySelector("p");
p.textContent = "Plain text only";

javascript

`element.innerText`

Similar to textContent, but reflects what’s visible to the user (e.g., respects CSS display: none).

const span = document.querySelector("span");
span.innerText = "Visible text";

javascript

How to Convert Collections to Arrays

// Convert HTMLCollection to Array
const divArray = Array.from(document.getElementsByTagName('div'));
// Or
const divArray2 = [...document.getElementsByTagName('div')];

// Now you can use array methods
divArray.forEach(div => {
  // Do something with each div
});

javascript

Static vs Live NodeLists

Static NodeList

A static NodeList is a collection of DOM nodes (elements, text nodes, etc.) that is not live, meaning it does not automatically update when the DOM changes.

Live NodeList

A live NodeList is a collection that automatically updates when the DOM structure changes. For example, if a new node is added or removed from the DOM, a live NodeList will reflect those changes immediately.

Live NodeLists are created by getElementsBy* methods.
Live NodeLists automatically update when the document changes, while static NodeLists do not.