Changing the Page: The DOM

Changing the Page: The DOM

The DOM — short for Document Object Model — is the browser's map of your web page. When the browser reads your HTML, it builds a tree of objects, one for each element. JavaScript can reach into that tree, read it, and change it. That is how pages update without reloading: new text appears, buttons change color, items get added to a list.

Finding Elements

To change something, you first need a reference to it. The most common tool is document.querySelector, which takes a CSS selector — the same pattern you use in stylesheets — and returns the first matching element.

<h1 id="title">Hello</h1>
<p class="note">Welcome to my page.</p>
<ul id="list"></ul>

const heading = document.querySelector('#title');   // by id
const note = document.querySelector('.note');       // by class
const list = document.querySelector('#list');       // by id

If nothing matches, querySelector returns null, so check before you use the result.

Reading and Changing Content

Elements have properties you can read and write. Two of the most useful are textContent (the plain text inside) and innerHTML (the HTML inside).

heading.textContent = 'Hello, JavaScript!';
console.log(note.textContent); // Welcome to my page.

Use textContent when you just want words. Avoid innerHTML with data from users or the network — inserting untrusted HTML is a security risk (called XSS).

Changing Styles and Attributes

Style changes go through the style property, and attributes through setAttribute:

heading.style.color = 'purple';
heading.style.fontSize = '32px';
list.setAttribute('data-owner', 'me');

Creating and Removing Elements

To add new content, create an element, fill it, and attach it to the page:

const item = document.createElement('li');
item.textContent = 'Buy milk';
list.appendChild(item);      // add it

const first = list.querySelector('li');
first.remove();              // remove it again

Note that item does not appear until you append it — creating an element only makes it in memory.

How It Fits Together

100%

Show diagram source

flowchart LR
    A[HTML file] --> B[Browser builds DOM tree]
    B --> C{JavaScript}
    C -- querySelector --> D[Read element]
    D -- change text, style, children --> B
    B --> E[Updated page on screen]

A key idea: the DOM tree is live. If you change it, the page on screen changes immediately — no save, no reload.

Putting It All Together

<button id="add">Add item</button>
<ul id="list"></ul>
<script>
  const button = document.querySelector('#add');
  const list = document.querySelector('#list');
  button.addEventListener('click', () => {
    const item = document.createElement('li');
    item.textContent = 'New item ' + (list.children.length + 1);
    list.appendChild(item);
  });
</script>

Each click creates a new list item. This combines everything: finding elements, creating elements, and (coming next chapter) responding to events.