The DOM

What you'll learn

How to find elements with querySelector, change their text, classes and styles, and create and remove elements.

Why it matters

The DOM is how JavaScript talks to a web page. Every interactive site, from a like button to a full app, works by reading and changing the DOM.

Explanation

When a browser loads HTML it builds the DOM (Document Object Model): a tree of objects, one per element. JavaScript gets at it through the global document object.

Finding elements:

• document.querySelector("#id") returns the first element matching a CSS selector.
• document.querySelectorAll(".item") returns all matches.

Changing them:

• el.textContent = "Hello" sets plain text. (Prefer it to innerHTML, which can run unsafe HTML.)
• el.classList.add("on"), .remove("on"), .toggle("on").
• el.style.color = "tomato" sets an inline style.
• el.setAttribute("href", "...") sets an attribute.

Creating and removing:

• document.createElement("li") makes a new element.
• parent.append(child) adds it.
• el.remove() deletes it.

Example

Step-by-step walkthrough

1. querySelector("#title") finds the heading. We change its text and colour.
2. We find the empty list and loop over three names.
3. For each name we create an <li>, set its text and append it to the list.
4. We add a class to the first item and remove the last one.
5. The page ends up showing the changed heading and a two-item list: Asha and Ravi.

Try it yourself

Add a fourth name, and make every item bold by setting li.style.fontWeight = "bold".

Change the DOMHTML / CSS

Editable code<h2 id="title">Hello</h2> <ul id="list"></ul> <script> const title = document.querySelector("#title"); title.textContent = "Changed by JavaScript"; title.style.color = "tomato"; const list = document.querySelector("#list"); for (const name of ["Asha", "Ravi", "Zoya"]) { const li = document.createElement("li"); li.textContent = name; list.append(li); } list.lastElementChild.remove(); </script>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Running the script before the element exists. Put the script at the end of the body, or wait for the page to load.
• A selector that finds nothing. querySelector returns null, and then null.textContent throws an error.
• Using innerHTML with user input, which can allow script injection.
• Forgetting querySelectorAll returns a list, not one element.

Quick quiz

Summary

• The DOM is the live tree of a page; document is the entry point.
• Find with querySelector, change with textContent, classList and style.
• Create with createElement, add with append, delete with remove.

Next: reacting to what users do.

<h2 id="title">Hello</h2>
<ul id="list"></ul>

<script>
  const title = document.querySelector("#title");
  title.textContent = "Changed by JavaScript";
  title.style.color = "tomato";

  const list = document.querySelector("#list");
  for (const name of ["Asha", "Ravi", "Zoya"]) {
    const li = document.createElement("li");
    li.textContent = name;
    list.append(li);
  }

  list.firstElementChild.classList.add("first");
  list.lastElementChild.remove();
</script>