Stop 04 · JavaScriptTopics · 13/36

DOM

In short

The DOM is the live version of your HTML that JavaScript can touch. Change it, and the page changes instantly, no reload needed. This is where your code starts to feel real.

The Document Object Model — a tree-structured, JavaScript-accessible representation of the HTML page that lets you read and manipulate content dynamically. DOM manipulation connects JavaScript state to visible browser content and teaches the fundamentals behind many higher-level UI frameworks.

The jaadu mascot hangs a new round node on a big cartoon family tree.

Think of it like this

The family tree

html is the great-grandparent, head and body are its kids, and every div, p and button sits somewhere down the tree. JavaScript can find any family member, change their outfit, or add a brand new baby to the tree.

Watch it happen

The page as a tree

document

html

head

body

h1#title

ul#list

li Pune

li Jaipur

li Kochi

1/5The browser turns the HTML into this tree. document sits at the top.

The big ideas

What you need to know

A tree of nodes

The browser turns your HTML into a tree of objects called nodes. Each element is a node you can read and change.

Find with querySelector

querySelector takes any CSS selector and returns the first match. querySelectorAll returns all matches.

textContent over innerHTML

textContent safely sets plain text. innerHTML parses HTML, so never use it with text a user typed.

Create, then append

document.createElement makes a new element. append puts it on the page. classList adds or removes CSS classes.

How it works

From your code to the screen

1
Browser builds the DOM
It reads your HTML and creates a tree of nodes in memory.
2
You select a node
JavaScript grabs an element with querySelector.
3
You change it
Update its text, class, attributes, or add new children.
4
Browser repaints
It recalculates styles and layout, then draws the updated page.

See it in code

Walk through the code

1// HTML: <h1 id="title">Hello</h1> <ul id="list"></ul>2const title = document.querySelector("#title");3title.textContent = "Namaste, Delhi!";4title.classList.add("highlight");5 6const list = document.querySelector("#list");7for (const city of ["Pune", "Jaipur", "Kochi"]) {8  const li = document.createElement("li");9  li.textContent = city;10  list.append(li);11}12 13console.log(document.querySelectorAll("li").length); // 3

1/4Find the heading, change its text and add a CSS class.

Every change you make here shows up on the page straight away. Open DevTools and watch the Elements panel update as the code runs.

Save yourself the pain

Common mistakes

Oops

Putting your script in the <head> and getting null from querySelector.

Do this instead

The element doesn't exist yet. Add defer to your script tag or place it at the end of <body>.

Oops

Setting el.innerHTML = userInput.

Do this instead

That lets someone inject scripts (an XSS attack). Use el.textContent = userInput for anything a user typed.

Your mission

Change any website

~15 min

Quick check

What does document.querySelector("#missing") return if no element matches?

Go deeper

1Use `document.querySelector`/`querySelectorAll` to select and modify elements. Verify the behavior with realistic data and handle the failure or empty state as well.
2Practice creating, appending and removing DOM nodes with JS. Test it with at least one normal case and one edge case so you can explain the behavior confidently.
3Learn the difference between `innerHTML`, `textContent` and `innerText`.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download