JavaScript DOM Manipulation

Learn to select, modify, and create HTML elements dynamically using JavaScript DOM methods.

Category: Programming · v1.0.0

Step 1 of 6

Step 1: What is the DOM?

When a browser loads an HTML page, it parses the markup and builds a Document Object Model (DOM) — a tree-shaped representation of every element on the page.

JavaScript can read and change this tree, which is how we make pages interactive. Every tag becomes a node in the tree:

document

<html>

<head>

<title>

"My Page"

<body>

<h1>

"Hello"

<p>

"World"

Key terms:

Document — the root object representing the entire page (document)
Element Node — an HTML tag like <div>, <p>, <h1>
Text Node — the actual text content inside an element
Node — the generic term for any item in the tree (elements, text, comments, etc.)

// The DOM lets JavaScript access any element:
document.querySelector('h1');       // Find an element
document.body;                      // The <body> element
document.title;                     // The page title text

Step 2: Selecting Elements

JavaScript provides several methods to find elements in the DOM. Type a selector method in the input below and click Select to see which elements get highlighted.

Sample HTML (rendered below):

<div id="container">
  <h3 class="title">Welcome</h3>
  <p class="info">First paragraph</p>
  <p class="info highlight">Second paragraph</p>
  <ul>
    <li>Item A</li>
    <li class="active">Item B</li>
    <li>Item C</li>
  </ul>
  <button id="myBtn">Click Me</button>
</div>

Welcome

First paragraph

Second paragraph

Item A
Item B
Item C

Try these:

// Pick a method and selector above, then click Select

Step 3: Modifying Elements

Once you have selected an element, you can change its content, styles, and classes. Use the controls below to modify the target element in real time.

Hello, DOM!

textContent

color

fontSize

backgroundColor

classList toggle

const el = document.querySelector('#dom-modify-target');
el.textContent = 'Hello, DOM!';
el.style.color = '#ffffff';
el.style.fontSize = '1.1rem';
el.style.backgroundColor = 'var(--color-primary)';

Step 4: Creating & Removing Elements

You can create new elements with document.createElement(), set their content, and append them to the page with appendChild(). Remove elements with removeChild() or element.remove().

Sample Item 1
Sample Item 2

Generated JavaScript:

// Add an item:
const li = document.createElement('li');
li.textContent = 'Sample Item 1';
document.querySelector('#list').appendChild(li);

// Remove last item:
const list = document.querySelector('#list');
list.removeChild(list.lastElementChild);

Step 5: Event Handling

Events let you respond to user actions. Use addEventListener() to attach handlers. Select an event type below, then interact with the demo element to see it fire.

Attach event:

No events attached yet. Select an event type and click Attach.

Interact with the elements below:

Hover Me

Event Log:

                Events will appear here...
            

// Example: listen for clicks
element.addEventListener('click', function(event) {
    console.log('Type:', event.type);
    console.log('Target:', event.target.tagName);
});

About This Lab

The Document Object Model (DOM) is how JavaScript interacts with HTML pages. In this lab, you'll learn to select elements with querySelector, modify content and styles, handle events, create and remove elements, and traverse the DOM tree — all with a live sandbox.

How It Works

Read each step's explanation of DOM concepts
Write JavaScript code in the editor
Click 'Run' to see results in the live preview
Experiment freely with the examples
Complete the quiz to test your knowledge