JavaScript Tutorial 6: The DOM & Events

Lesson 5 Review

In our last lesson, we learned how to store complex data using Objects and loop through Arrays of Objects. Up until now, our JavaScript has mostly lived inside the Developer Console. Today, we learn how to make JavaScript reach out and physically manipulate the webpage the user is looking at.

Step 1: What is the DOM?

When a web browser loads your HTML file, it translates all those tags (<div>, <h1>, <p>) into a massive, invisible JavaScript Object. This object is called the Document Object Model (DOM).

Because the webpage is now a JavaScript Object (named document), we can use JavaScript methods to select elements, change their text, alter their CSS, or even delete them entirely.

Selecting Elements (The Query Selector)

Before you can change an element, you must tell JavaScript to find it. The modern, professional way to select elements is using querySelector(). It uses the exact same syntax as CSS selectors (. for classes, # for IDs).

The JavaScript: Finding Elements

// 1. Select by ID (Returns a single element)
const mainTitle = document.getElementById("header-title");

// 2. Select by Class using querySelector (Returns the FIRST match it finds)
const firstButton = document.querySelector(".submit-btn");

// 3. Select ALL elements with a class (Returns an Array-like list!)
const allCards = document.querySelectorAll(".product-card");

Step 2: Manipulating Elements (Text & CSS)

Once you have captured an HTML element inside a JavaScript variable, you can modify its properties.

• element.innerText: Changes the text inside the HTML tags.
• element.innerHTML: Allows you to inject actual HTML tags (like <strong>) into the element.
• element.style.propertyName: Allows you to write inline CSS directly from JavaScript. (Note: In JS, CSS properties use camelCase instead of dashes. So background-color becomes backgroundColor).

The HTML & JavaScript: Altering the Page

<!-- HTML -->
<h2 id="status-message">Loading...</h2>

/* JavaScript */
const message = document.querySelector("#status-message");

// Change the text
message.innerText = "System Online!";

// Change the CSS style dynamically
message.style.color = "white";
message.style.backgroundColor = "green";
message.style.padding = "15px";

The Output (Generated entirely by JS):

System Online!

Step 3: Event Listeners (The Core of Interactivity)

Changing text automatically is okay, but true web applications react to the user. We want the code to run only when the user clicks a button, types in a field, or hovers over an image.

We achieve this using addEventListener(). This method tells the browser to "listen" for a specific action on a specific element, and when it hears it, it executes a Function.

Syntax: element.addEventListener('event_type', function_to_run)

<!-- HTML -->
<button id="magic-btn">Click Me</button>

/* JavaScript */
const btn = document.querySelector("#magic-btn");

// Listen for a "click" event. When it happens, run the arrow function.
btn.addEventListener("click", () => {
  alert("You clicked the button!");
});

Step 4: The classList Property (The Professional Standard)

In Step 2, we used element.style.color = "green". While this works, writing massive amounts of CSS inside your JavaScript file is considered bad architectural practice. It mixes styling with logic, making the code hard to maintain.

The professional way to change an element's appearance is to write a CSS Class in your stylesheet (e.g., .is-active), and use JavaScript to simply add or remove that class from the HTML element using the classList API.

• element.classList.add("class-name")
• element.classList.remove("class-name")
• element.classList.toggle("class-name"): This is magic. If the class is there, it removes it. If it's missing, it adds it. Perfect for On/Off switches!

The Complete HTML, CSS, & JS System:

<!-- HTML -->
<button id="toggle-btn">Transform Box</button>
<div id="shape-box" class="demo-box">Square</div>

/* CSS (Written in your stylesheet) */
.demo-box { background: red; transition: 0.3s; }
.is-active { background: green; border-radius: 50%; } /* Turns it into a green circle */

/* JavaScript */
const triggerBtn = document.querySelector("#toggle-btn");
const box = document.querySelector("#shape-box");

triggerBtn.addEventListener("click", () => {
  // Toggle the class on and off every time it is clicked!
  box.classList.toggle("is-active");
});

The Output (Click the button below!):

Shape

Final Quiz: Test Your DOM Logic

Click the buttons below to verify your knowledge.

1. You want to select an element that has `class="hero-image"`. Which JavaScript command is the most modern and effective way to do this?

A) document.getElementById("hero-image");

Incorrect. The element uses a `class`, not an `id`. This command will return `null`.

B) document.querySelector(".hero-image");

Correct! `querySelector` is incredibly powerful because it uses standard CSS syntax. Don't forget the period `.` to indicate it is a class!

C) document.select(".hero-image");

Incorrect. `document.select` is not a valid JavaScript DOM method.

2. Why do professional developers prefer `element.classList.add("active")` over writing `element.style.color = "red"` directly in JavaScript?

A) Because `element.style` only works on mobile phones.

Incorrect. It works on all devices, but it's bad architecture.

B) Because using `classList` separates the concerns. All visual design stays strictly in the CSS file, and JavaScript only handles the logic of switching those styles on and off.

Correct! Separation of Concerns (SoC) is a massive concept in engineering. Keep your HTML structural, your CSS visual, and your JS logical. Do not mix them together unnecessarily.

C) Because `element.style` requires you to download a third-party library to work.

Incorrect. Both are native to vanilla JavaScript.

3. What is the syntax error in this code: `btn.addEventListener("click", updateScore());`

A) The word "click" should be "onClick".

Incorrect. `addEventListener` strictly uses the bare event name, so `"click"` is perfectly correct.

B) You should not put parentheses `()` after `updateScore`. Doing so forces the function to run immediately when the page loads, instead of waiting for the user to actually click.

Correct! This is a classic bug! You want to pass the *reference* to the function (`updateScore`), not the executed result of the function (`updateScore()`). The browser will trigger the parentheses when the click finally happens.

C) You forgot to include the `document.` prefix before `addEventListener`.

Incorrect. `addEventListener` is called on the specific element you selected (in this case, `btn`), not the whole document.