Lesson 6 of 9

The DOM: changing the page with code

You can now store values, make decisions and write functions. But so far everything has happened in the console. Time to change the actual page. To do that, JavaScript uses something called the DOM.

What the DOM is

When the browser loads your HTML, it builds a model of the page in memory, like a family tree of elements. The html element is at the top, head and body are its children, your header and main are inside body and so on. This tree is called the DOM, short for Document Object Model.

JavaScript can read and change that tree. When it changes something in the DOM, the page on the screen updates instantly. That's how every interactive website works.

You've actually seen the DOM already. The Elements tab in the developer tools shows it. It's the live version of the page, including any changes JavaScript has made.

Finding elements

Before you can change an element, you need to find it. The main tool is document.querySelector, which takes a CSS selector, the same kind you wrote in the CSS course:

javascript

const heading = document.querySelector('h1');
const intro = document.querySelector('.intro');
const contact = document.querySelector('#contact');

It returns the first element that matches. To get all matching elements, use querySelectorAll:

javascript

const sections = document.querySelectorAll('section');
sections.forEach((section) => {
  console.log(section.id);
});

If nothing matches, querySelector returns null. If you get an error like "Cannot read properties of null", it usually means your selector didn't find anything. Check the spelling, and check that your script has defer so the page is loaded when it runs.

Quick check

Which line finds the first element with class="card"?

Select one answer

Changing text

Once you have an element, you can change its text with textContent:

javascript

const heading = document.querySelector('h1');
heading.textContent = 'Welcome to my website!';

The heading on the page changes immediately.

You might come across innerHTML, which lets you put HTML inside an element. Be careful with it. If the text comes from a visitor, like something typed into a form, innerHTML can let someone inject harmful code into your page. For plain text, always use textContent.

Changing classes

The cleanest way to change how something looks is to add or remove classes, and let your CSS do the styling:

javascript

const card = document.querySelector('.card');

card.classList.add('highlight');
card.classList.remove('highlight');
card.classList.toggle('highlight');

toggle adds the class if it's missing and removes it if it's there. It's perfect for things that switch on and off, like a dark mode or an open menu.

css

.highlight {
  outline: 3px solid gold;
}

This keeps a nice separation of jobs: CSS decides how things look, JavaScript decides when they change.

Quick check

You want a dark mode that switches on and off each time. Which method fits best?

Select one answer

Creating new elements

JavaScript can also add completely new elements to the page. It takes three steps:

javascript

// 1. Create the element
const item = document.createElement('li');

// 2. Fill it with content
item.textContent = 'Learn the DOM';

// 3. Put it on the page
const list = document.querySelector('ul');
list.append(item);

The new item appears at the end of the list. Combine this with a loop and an array, and you can build a whole list from data:

javascript

const skills = ['HTML', 'CSS', 'Git', 'JavaScript'];
const list = document.querySelector('#skills');

for (const skill of skills) {
  const item = document.createElement('li');
  item.textContent = skill;
  list.append(item);
}

To remove an element, call remove() on it: item.remove();

Quick check

You create an element with createElement. Why doesn't it show up on the page yet?

Select one answer

Try it yourself

Change your website with JavaScript:

Find your h1 with querySelector and change its text, then change it back so your page isn't wrong
Add an empty <ul id="skills"></ul> somewhere on your page, then fill it from JavaScript with an array of skills and a loop
Add a .highlight class in your CSS and use classList.add to put it on one of your sections
Open the Elements tab and watch your new list items appear in the DOM

Commit your work when you're done.