JavaScript Intermediate Day 4: DOM Manipulation

Goal of this Day

Today you will learn:

• How to interact with websites using JavaScript
• Use document.querySelector() to select elements
• Add events using addEventListener()
• Change HTML content and CSS styles dynamically

By the end, you will be able to make your web pages interactive.

Step 1: Selecting Elements

Use document.querySelector() to select an element:

const button = document.querySelector("button");

Step 2: Adding Event Listeners

Add behavior to elements:

button.addEventListener("click", () => {
  alert("Clicked!");
});

Step 3: Changing HTML & CSS

You can change text or style:

const message = document.querySelector("#message");

message.textContent = "New text";
message.style.color = "red";

Practice

document.querySelector("button")
  .addEventListener("click", () => {
    alert("Clicked!");
  });

Task

Complete the following:

• Create a button in HTML
• Change its text when clicked using JavaScript

Example:

// HTML
// <button id="myBtn">Click me</button>

// JavaScript
const btn = document.querySelector("#myBtn");

btn.addEventListener("click", () => {
  btn.textContent = "Clicked!";
});