× Full Screen Image

DOM

The DOM (Document Object Model) is a programming interface that represents an HTML page as a tree of objects. Every element, attribute, and piece of text becomes a node in this tree.

When a browser loads a page, it builds the DOM from the HTML. JavaScript can then read and change the DOM to update what the user sees — without reloading the page.

html

<!-- HTML structure -->
<html>
  <body>
    <h1 id="title">Hello World</h1>
    <p>Welcome to the DOM.</p>
  </body>
</html>

The browser turns the HTML above into a tree of nodes. JavaScript can walk this tree, find elements, and modify them at any time.

Before you can change an element, you need to select it. JavaScript gives you several methods to find elements in the DOM.

getElementById() finds a single element by its id attribute. It returns the element or null if nothing is found.

javascript

// HTML: <h1 id="title">Hello</h1>

const heading = document.getElementById("title");
console.log(heading.textContent); // Output: Hello

Because id values must be unique in a page, this method always returns at most one element.

querySelector() accepts any CSS selector and returns the first matching element. It is more flexible than getElementById.

javascript

// HTML: <p class="intro">Welcome</p>

const para = document.querySelector(".intro");
console.log(para.textContent); // Output: Welcome

// Select by tag name
const firstBtn = document.querySelector("button");

// Select by attribute
const link = document.querySelector('a[href="#top"]');

querySelectorAll() returns a NodeList containing all elements that match the CSS selector. You can loop over it with forEach.

javascript

// HTML: <li>Apple</li> <li>Banana</li> <li>Cherry</li>

const items = document.querySelectorAll("li");

items.forEach(item => {
  console.log(item.textContent);
});
// Output: Apple, Banana, Cherry

Once you have a reference to an element, you can read and change its properties.

innerHTML gets or sets the HTML content inside an element, including any tags.

javascript

const box = document.getElementById("box");

// Read HTML content
console.log(box.innerHTML); // e.g. "<strong>Hello</strong>"

// Set HTML content (renders as HTML)
box.innerHTML = "<strong>Updated!</strong>";

Be careful with innerHTML when inserting user-provided data, as it can expose your page to cross-site scripting (XSS) attacks. Use textContent instead when you only need plain text.

textContent gets or sets the plain text inside an element. Unlike innerHTML, it treats everything as text so HTML tags are not rendered.

javascript

const msg = document.getElementById("msg");

// Read text (no HTML tags)
console.log(msg.textContent); // Output: Hello World

// Set plain text (tags are escaped, not rendered)
msg.textContent = "Goodbye <World>";

You can read, set, and remove HTML attributes using getAttribute, setAttribute, and removeAttribute.

javascript

// HTML: <img id="logo" src="old.png" alt="Logo">

const img = document.getElementById("logo");

// Read an attribute
console.log(img.getAttribute("src")); // Output: old.png

// Change an attribute
img.setAttribute("src", "new.png");

// Remove an attribute
img.removeAttribute("alt");

The style property lets you apply inline CSS to an element. CSS property names use camelCase in JavaScript (e.g. backgroundColor instead of background-color).

javascript

const box = document.getElementById("box");

box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.fontSize = "20px";

For toggling visual states, prefer adding and removing CSS classes with classList.add(), classList.remove(), or classList.toggle().

javascript

const btn = document.getElementById("btn");

btn.classList.add("active");      // add a class
btn.classList.remove("hidden");   // remove a class
btn.classList.toggle("open");     // add if absent, remove if present

DOM manipulation means creating, adding, or removing elements on the page using JavaScript. The three most common methods are createElement, appendChild, and removeChild.

document.createElement() creates a new HTML element in memory. The element is not visible on the page until you attach it to the DOM.

javascript

// Create a new paragraph element
const newPara = document.createElement("p");
newPara.textContent = "I was created with JavaScript!";

appendChild() inserts an element as the last child of a parent element. If the element already exists in the DOM, it is moved to the new position.

javascript

// HTML: <ul id="list"></ul>

const list = document.getElementById("list");

const item = document.createElement("li");
item.textContent = "New item";

list.appendChild(item);
// Result: <ul><li>New item</li></ul>

removeChild() removes a child element from its parent. You call it on the parent and pass the child you want to remove.

javascript

// HTML: <ul id="list"><li id="item1">First</li></ul>

const list = document.getElementById("list");
const item = document.getElementById("item1");

list.removeChild(item); // removes the li from the ul

// Modern shorthand (no need for parent reference)
item.remove();
  • The DOM is a tree of objects that represents an HTML page.
  • getElementById selects one element by its unique id.
  • querySelector selects the first element matching a CSS selector.
  • querySelectorAll returns all matching elements as a NodeList.
  • innerHTML reads or writes HTML content inside an element.
  • textContent reads or writes plain text, safely escaping HTML.
  • setAttribute / getAttribute manage HTML attributes.
  • style and classList control element styling.
  • createElement + appendChild add new elements to the page.
  • removeChild / remove() delete elements from the page.
Previous
Next