JavaScript - 12

JavaScript - 12: Introduction to the DOM

The DOM lets JavaScript find and change parts of a web page.

So far, most of your JavaScript has worked with values and printed results to the console. Now you will begin using JavaScript to control actual HTML elements.

Your challenge: Select the paragraph with the id output-text and replace its text using document.getElementById() and .textContent.

What is the DOM?

DOM stands for Document Object Model.

When a browser loads an HTML page, it creates a JavaScript-accessible representation of the page.

JavaScript can use the DOM to find elements, read information from them, and change them.

For example, JavaScript can change:

text,
styles,
attributes,
classes,
and even create or remove elements.

For now, you will begin with one of the simplest DOM tasks: changing text.

The document object

In browser JavaScript, document represents the current web page.

It gives JavaScript access to the HTML elements on that page.

That is why the code begins with: document

Find an element by its id

The preview contains this HTML element: <p id="output-text">This text should change...</p>

Because the paragraph has the id output-text, JavaScript can find it with:

document.getElementById("output-text")

The text inside the quotation marks must match the HTML id exactly.

Change the text with .textContent

Once JavaScript has found the paragraph, you can change the text stored inside it.

For example:

document.getElementById("output-text").textContent = "Hello from JavaScript!";

The original paragraph text disappears and the new text appears in the Live Output.

Read the code from left to right

This line may look long at first:

document.getElementById("output-text").textContent = "Hello!";

You can think of it as:

1. Look at the web page with document.
2. Find the element whose id is output-text.
3. Access its textContent.
4. Replace that text with "Hello!".

Store the element in a variable

You do not have to perform every step on one line.

You can store the selected element in a variable:

const paragraph = document.getElementById("output-text");

Then change it:

paragraph.textContent = "JavaScript found this paragraph!";

This can make your code easier to read, especially when you need to work with the same element more than once.

Why use const here?

The paragraph variable continues to refer to the same DOM element, so there is usually no need to assign a completely different value to that variable.

That makes const a good choice.

Experiment:

Change the message several times.

For example:

"The DOM is working!"

or:

"JavaScript changed this paragraph."

Watch the Live Output update as you edit the code.

Try selecting the wrong id:

Temporarily change: "output-text" to: "missing-text"

There is no element with that id.

Because getElementById() cannot find a match, it returns null. Trying to use .textContent on that missing value causes an error.

Change the id back to "output-text" afterward.

HTML and JavaScript are now working together

This lesson is an important change from the earlier exercises.

Previously, JavaScript mostly calculated values or printed messages. Now JavaScript is changing something that the visitor can actually see on the page.

DOM manipulation is the foundation for interactive web features such as buttons, menus, forms, counters, tabs, and many other interface behaviors.

Extra experiment:

Store the paragraph in a variable first:

const message = document.getElementById("output-text");

Then change its text on a separate line:

message.textContent = "I selected this element with JavaScript!";

Good JavaScript habit: When you plan to work with the same DOM element several times, store it in a clearly named variable instead of repeatedly searching for it.

const paragraph = document.getElementById("output-text");

paragraph.textContent = "Success! JavaScript is now controlling this text 🎉";