MODULE 6: The DOM (Document Object Model)

JavaScript Foundations • StreetGeek Academy

🧠 MODULE 6: The DOM (Document Object Model)

Learn how to select, create, modify, and remove HTML elements using JavaScript — and use this to dynamically update your portfolio content.

1) What Is the DOM?

The Document Object Model (DOM) is a structured, tree-like representation of your webpage.
Think of it as a map where each HTML tag becomes a JavaScript object you can manipulate.

HTML Example

<h1 id="title">Welcome to StreetGeek!</h1>

In JavaScript

document.getElementById("title"); // returns the <h1> element

✅ Once you have a DOM element, you can read or change its properties.

2) Selecting Elements

Method	Returns	Example
`getElementById()`	1 element	`document.getElementById("title")`
`getElementsByClassName()`	HTMLCollection (list)	`document.getElementsByClassName("card")`
`getElementsByTagName()`	HTMLCollection (list)	`document.getElementsByTagName("p")`
`querySelector()`	First match	`document.querySelector(".card")`
`querySelectorAll()`	All matches (NodeList)	`document.querySelectorAll(".card")`

💡 Use querySelector and querySelectorAll — they’re the most flexible and modern.

3) Reading and Changing Content

const title = document.getElementById("title");
title.textContent = "My JavaScript-Powered Portfolio!"; // Change text
title.style.color = "#0E477B"; // Inline style

Property	Description
`textContent`	Sets or gets the text inside an element.
`innerHTML`	Sets or gets the HTML inside an element.
`style.property`	Directly change CSS properties.

Example

title.innerHTML = "<span>Welcome, <strong>Yogi!</strong></span>";

4) Creating and Appending Elements

Create a new element and add it to the page:

const newCard = document.createElement("div");
newCard.className = "card";
newCard.textContent = "New Project Card";

const projectSection = document.getElementById("projects");
projectSection.appendChild(newCard);

✅ You’ve dynamically added a new card to your page using JavaScript.

5) Removing Elements

const removeBtn = document.querySelector(".remove");
removeBtn.remove();

Or using the parent element:

parent.removeChild(child);

💡 Always check the element exists before removing it:

if (removeBtn) removeBtn.remove();

6) Updating Attributes

const link = document.querySelector("a");
link.setAttribute("href", "https://sitesbyyogi.com");
link.setAttribute("target", "_blank");
link.textContent = "Visit My Site";

To read an attribute:

console.log(link.getAttribute("href"));

To remove one:

link.removeAttribute("target");

7) Working with Classes

You can add, remove, or toggle classes for styling or animation.

const card = document.querySelector(".card");
card.classList.add("highlight");
card.classList.remove("hidden");
card.classList.toggle("active");

💡 Use toggle() for buttons like dark mode or menu open/close.

8) Hands-On Practice

Exercise 1: Update Hero Text Dynamically

<h1 id="hero-title">Welcome!</h1>
<p id="hero-subtitle"></p>

const heroTitle = document.getElementById("hero-title");
const heroSubtitle = document.getElementById("hero-subtitle");

heroTitle.textContent = "Welcome to My Portfolio ✨";
heroSubtitle.textContent = "Powered by JavaScript and StreetGeek Academy.";

✅ You just edited live text via JavaScript.

Exercise 2: Add a New Project Card

<section id="projects"></section>

const projects = document.getElementById("projects");

function addProject(title, tech) {
  const div = document.createElement("div");
  div.className = "card";
  div.innerHTML = `<h3>${title}</h3><p>${tech}</p>`;
  projects.appendChild(div);
}

addProject("Nfinite Dashboard", "JavaScript, CSS Grid");
addProject("ShopBlocks WP", "PHP, WooCommerce");

✅ Dynamically adds new project cards to your portfolio!

Exercise 3: Toggle Theme Class

<button id="theme-toggle">Toggle Theme</button>

const btn = document.getElementById("theme-toggle");

btn.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");
});

💡 Later you can combine this with localStorage to remember the user’s theme.

9) DOM Traversal (Parent ↔ Child)

Move around the DOM tree using parent and child relationships.

const card = document.querySelector(".card");
console.log(card.parentElement); // Parent
console.log(card.children);      // All child nodes

Removing all children (clear a section)

projects.innerHTML = "";

10) Bonus: Add Animation or Transitions via JS

const cards = document.querySelectorAll(".card");

cards.forEach(card => {
  card.addEventListener("mouseenter", () => {
    card.style.transform = "scale(1.05)";
    card.style.transition = "0.3s";
  });
  card.addEventListener("mouseleave", () => {
    card.style.transform = "scale(1)";
  });
});

✅ Your portfolio grid now feels alive when you hover over project cards.

11) Quiz Time

Show/Hide Questions

1) What does the DOM represent?

2) What’s the difference between textContent and innerHTML?

3) What method would you use to create a new element?

4) How do you add and remove CSS classes from an element?

5) What’s the purpose of querySelectorAll()?

🚀 Challenge Task: Dynamic Testimonials

Add a “Dynamic Testimonials” section to your portfolio.

HTML

<section id="testimonials"></section>

JavaScript Data

const testimonials = [
  { name: "Alex",   quote: "StreetGeek helped me build my first site!" },
  { name: "Monica", quote: "Yogi’s teaching style is amazing!" },
  { name: "Chris",  quote: "I finally understand JavaScript thanks to this course." }
];

Render Testimonials

const container = document.getElementById("testimonials");

testimonials.forEach(t => {
  const block = document.createElement("blockquote");
  block.innerHTML = `<p>"${t.quote}"</p><cite>- ${t.name}</cite>`;
  container.appendChild(block);
});

✅ You’ve now created dynamic content from JS data using the DOM!

🏁 Module 6 Summary

How to select and manipulate DOM elements
How to create, update, and remove elements dynamically
How to work with attributes and classes
How to make your site respond visually to JavaScript events
How to connect real data to real UI

Next up → MODULE 7: Events & Interactivity
You’ll learn how to listen for clicks, keypresses, form inputs, and more — giving your users true control and responsiveness.