What Is the Document Object Model?

HTML provides the structure of a webpage, CSS controls its appearance, and JavaScript makes it interactive. But how does JavaScript know which heading, paragraph, or button to change?

The answer is the Document Object Model (DOM). When a browser loads an HTML document, it creates an object-based representation of that document. JavaScript can use this representation to read and modify the page.

<body>
  <h1>Welcome!</h1>
  <p>Let's learn JavaScript.</p>
  <button>Click Me</button>
</body>

The browser represents these elements as nodes in a tree. The heading, paragraph, and button become elements that JavaScript can access.

Find the HTML You Want to Change

Before changing an element, JavaScript needs to locate it. You can find elements by their ID or use CSS-style selectors.

<h1 id="pageTitle">Welcome!</h1>
<p class="message">Hello there.</p>

const title = document.getElementById("pageTitle");

const message = document.querySelector(".message");

console.log(title.textContent);
console.log(message.textContent);

getElementById() finds an element using its ID. querySelector() finds the first element matching a CSS selector, such as .message for a class or #pageTitle for an ID.

If nothing matches, these methods return null. Always ensure the element exists before trying to modify it.

Update Text With JavaScript

One of the simplest DOM operations is changing what an element displays. The textContent property lets you read or replace an element’s text.

<h1 id="greeting">Hello!</h1>

<script>
  const heading = document.getElementById("greeting");
  heading.textContent = "Welcome to mC0de!";
</script>

JavaScript changes the heading without requiring the visitor to reload the entire page.

You may also encounter innerHTML, which interprets strings as HTML markup. It’s useful for trusted markup, but should not be used to insert untrusted user input.

Control How Elements Look

JavaScript can also change an element’s appearance. The style property provides access to inline CSS styles.

const title = document.getElementById("pageTitle");

title.style.color = "teal";
title.style.fontSize = "32px";
title.style.textAlign = "center";

Notice that CSS property names containing hyphens are written in camelCase when accessed through JavaScript. For example, font-size becomes fontSize.

For larger style changes, it’s often cleaner to add or remove CSS classes instead.

const card = document.querySelector(".card");

card.classList.add("highlighted");
card.classList.remove("hidden");
card.classList.toggle("active");

classList.add() adds a class, remove() removes one, and toggle() switches it on or off.

Add HTML Elements Dynamically

Sometimes a webpage needs to display something that wasn’t present when it first loaded. JavaScript can create new elements and insert them into the document.

const container = document.getElementById("content");

const paragraph = document.createElement("p");
paragraph.textContent = "This paragraph was created by JavaScript!";

container.appendChild(paragraph);

createElement() creates an element in memory. appendChild() inserts it at the end of the selected container.

To add multiple elements, you can repeat these steps in a loop—especially useful when rendering an array of items.

Keep Your Page in Sync

JavaScript can remove elements that are no longer needed. The remove() method removes an element from its parent.

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

if (notice) {
  notice.remove();
}

It’s helpful to check that an element exists before calling methods on it.

You can also replace the contents of a container and rebuild it from your current data.

const items = ["HTML", "CSS", "JavaScript"];
const list = document.getElementById("courseList");

list.replaceChildren();

for (const course of items) {
  const item = document.createElement("li");
  item.textContent = course;
  list.appendChild(item);
}

replaceChildren() clears the container when called without arguments. The loop then creates a fresh list from the array.

Build a Live Page Editor

Let’s combine element selection, text updates, and styling into a small demonstration. Use the controls below to customize a preview card.

Every button selects or creates DOM elements and updates the webpage. No full-page refresh is necessary.