JavaScript DOM Manipulation

So far, we've mostly worked with JavaScript itself—variables, functions, arrays, objects, and other language features.

But how does JavaScript actually change a webpage?

For example, how can we:

• Change the text on a page?

• Change colors or styles?

• Add new elements?

• Remove elements?

• Respond when a user clicks a button?

This is where the DOM comes in.

What is the DOM?

DOM stands for Document Object Model.

The DOM is a programming representation of an HTML document that allows JavaScript to access and modify the webpage's structure, content, and elements.

For example, consider this HTML:

<h1>Hello World</h1>
<p>Welcome to my website.</p>

The browser creates a DOM representation of these elements.

JavaScript can then access them and make changes.

You can think of it like this:

HTML Page
    ↓
Browser creates DOM
    ↓
JavaScript accesses the DOM
    ↓
JavaScript changes the webpage

This is what makes webpages interactive.

Selecting HTML Elements

Before we can modify an element, we first need to find it.

JavaScript provides several methods for selecting elements.

getElementById()

Suppose we have:

<h1 id="title">Hello World</h1>

We can select it using:

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

console.log(title);

Now title refers to that <h1> element.

querySelector()

querySelector() is one of the most commonly used methods for selecting elements.

<h1 class="title">Hello World</h1>

We can select it using its class:

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

We can also select an ID:

const title = document.querySelector("#title");

Or an HTML element:

const title = document.querySelector("h1");

It uses CSS selector syntax, which makes it very flexible.

querySelectorAll()

If we want to select multiple elements, we can use querySelectorAll().

For example:

<p class="text">First</p>
<p class="text">Second</p>
<p class="text">Third</p>

JavaScript:

const paragraphs = document.querySelectorAll(".text");

console.log(paragraphs);

This gives us a collection of all matching elements.

We can loop through them:

paragraphs.forEach(paragraph => {
    console.log(paragraph.textContent);
});

Output:

First
Second
Third

Changing Text

One of the simplest DOM operations is changing the text of an element.

Suppose we have:

<h1 id="title">Hello World</h1>

We can change it with:

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

title.textContent = "Welcome to JavaScript!";

The webpage now displays:

Welcome to JavaScript!

textContent vs innerHTML

These two properties are commonly used when changing content.

textContent

title.textContent = "Hello!";

This treats the value as plain text.

innerHTML

title.innerHTML = "<strong>Hello!</strong>";

This interprets the value as HTML.

The browser will display:

Hello!

For plain text, prefer textContent. Be especially careful with innerHTML when inserting content that comes from users or other untrusted sources, because unsafe HTML can create security problems such as cross-site scripting (XSS).

Changing HTML Attributes

HTML elements often have attributes such as:

<img id="photo" src="old.jpg" alt="Old image">

JavaScript can change them.

const image = document.getElementById("photo");

image.src = "new.jpg";
image.alt = "New image";

We can also use:

image.setAttribute("src", "new.jpg");

And retrieve an attribute using:

image.getAttribute("src");

Changing CSS Styles

JavaScript can directly modify an element's inline styles.

Suppose:

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

We can change its color:

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

title.style.color = "blue";

We can change multiple properties:

title.style.color = "blue";
title.style.fontSize = "40px";
title.style.backgroundColor = "lightgray";

Notice that CSS properties such as:

background-color
font-size

become:

backgroundColor
fontSize

when accessed through JavaScript.

Working with CSS Classes

Instead of changing styles one by one, it's usually better to work with CSS classes.

Suppose we have:

<h1 id="title" class="heading">Hello</h1>

JavaScript provides classList for managing classes.

Add a Class

title.classList.add("active");

Remove a Class

title.classList.remove("heading");

Toggle a Class

title.classList.toggle("active");

toggle() is particularly useful for things like dark mode, menus, and showing/hiding elements.

Creating New Elements

JavaScript can create completely new HTML elements.

For example:

const paragraph = document.createElement("p");

paragraph.textContent = "This paragraph was created using JavaScript.";

At this point, the element exists in memory, but it isn't yet visible on the page.

We need to add it to the DOM.

Adding Elements to the Page

We can use append():

document.body.append(paragraph);

Now the paragraph appears on the page.

We can also append an element to a specific container:

<div id="container"></div>

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

const paragraph = document.createElement("p");
paragraph.textContent = "Hello from JavaScript!";

container.append(paragraph);

Removing Elements

We can remove an element using .remove().

const paragraph = document.querySelector("p");

paragraph.remove();

The selected paragraph is removed from the DOM and disappears from the webpage.

Adding and Removing Classes

Here's a practical example.

HTML:

<p id="message">Hello World</p>

CSS:

.highlight {
    font-weight: bold;
}

JavaScript:

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

message.classList.add("highlight");

Now the paragraph gets the styles defined by .highlight.

This approach is usually cleaner than setting every style directly from JavaScript.

DOM Traversal

The DOM also allows us to move between related elements.

Suppose we have:

<div id="container">
    <p>Hello</p>
    <p>World</p>
</div>

We can access the parent:

const paragraph = document.querySelector("p");

console.log(paragraph.parentElement);

We can access children:

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

console.log(container.children);

We can also access the first and last child:

console.log(container.firstElementChild);
console.log(container.lastElementChild);

DOM traversal becomes especially useful when we need to work with elements based on their relationship to other elements.

A Practical Example

Let's build a small counter.

HTML:

<h2 id="count">0</h2>

<button id="increase">Increase</button>

JavaScript:

const count = document.getElementById("count");
const button = document.getElementById("increase");

let value = 0;

button.addEventListener("click", () => {
    value++;
    count.textContent = value;
});

Now every time the user clicks the button, the number increases:

0 → 1 → 2 → 3 → 4 → ...

This is a simple example of how JavaScript connects user interaction with the DOM.

We'll explore events more deeply in the next topic.

Important DOM Methods and Properties

Conclusion

The DOM is the bridge between JavaScript and an HTML webpage.

With DOM manipulation, JavaScript can:

• Find HTML elements

• Change text and HTML

• Modify attributes

• Change styles

• Add and remove CSS classes

• Create new elements

• Add or remove elements from the page

• Navigate between related elements

A simple example looks like this:

const title = document.querySelector("#title");

title.textContent = "Hello JavaScript!";
title.classList.add("active");

Once you understand DOM manipulation, JavaScript starts becoming much more interesting because you're no longer just working with values in the console—you can actually control what users see and interact with on a webpage.