JavaScript DOM Manipulation

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

Programming v1.0.0 154 uses

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

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

X Facebook LinkedIn Reddit WhatsApp Telegram Pinterest Email

More Labs in Programming

JavaScript Promises & Async

Programming

Master asynchronous JavaScript — callbacks, Promises, async/await, and error handling with visual timelines.

Regular Expressions

Programming

Master regex patterns — match, search, and extract text with an interactive pattern tester.

Python Basics

Programming

Write your first Python code — learn variables, data types, conditionals, and loops interactively.

JavaScript DOM Manipulation

Step 1: What is the DOM?

Step 2: Selecting Elements

Welcome

Step 3: Modifying Elements

Step 4: Creating & Removing Elements

Step 5: Event Handling

Step 6: Knowledge Check

About This Lab

How It Works

More Labs in Programming

JavaScript Promises & Async

Regular Expressions

Python Basics