JavaScript in the page · Lesson 29 of 45

Controlling the page (DOM)

Find an element on the page and change its text and style.

9 minutes2 games

The browser turns HTML into a tree of objects called the DOM (Document Object Model). Every tag becomes a node in the tree, and JavaScript can read and change any of it, updating the page instantly.

document
- html
  - head
    - title
  - body
    - h1#title
    - ul.menu
      - li
      - li
    - button

The DOM of a simple page.

To	Use
select the first match	`document.querySelector("#title")`
select every match	`document.querySelectorAll(".item")`
change text	`el.textContent = "..."`
change style	`el.style.color = "red"`
add/remove a class	`el.classList.add("active")` / `.remove` / `.toggle`
read/set an attribute	`el.getAttribute("href")` / `el.setAttribute(...)`

HTML

<style>.done { text-decoration: line-through; color: gray; }</style>
<h2 id="title">Hello</h2>
<ul>
  <li class="task">Learn HTML</li>
  <li class="task">Learn CSS</li>
  <li class="task">Learn JS</li>
</ul>

<script>
  const title = document.querySelector("#title")
  title.textContent = "My tasks"
  title.style.color = "teal"

  const tasks = document.querySelectorAll(".task")
  tasks[0].classList.add("done")
  tasks[1].classList.add("done")
  console.log(tasks.length, "tasks")
</script>

Complete the code

Select the element whose id is price.

const el = document.("")

Quick question

You want to show and hide something on each click. Which tool fits best?

Learn more from

Played 0 of 2 games

JavaScript