DTC 477: Advanced Web Design & Development

Week 4: DOM Manipulation

To Do This Week:

Assignments:

Read (Optional!): Chapters from Eloquent JavaScript:

Upcoming Assignments

Module Notes

This week we move from working with data (arrays, iterators) to working with the page itself. The DOM (Document Object Model) is the browser's live, tree-shaped representation of your HTML. JavaScript can reach into that tree to select elements, read and change them, add or remove them, and respond to what the user does.

The whole loop for the Clickable Page is: select an element → listen for a click → change something on the page. Everything below is a variation on that loop.

The DOM as a Tree

Your HTML nests elements inside elements. The browser turns that nesting into a tree of nodes. document is the root. From there you can travel down to children, up to parents, and sideways to siblings.

In-class Exercise:

DOM Playground: Buttons, Boxes & Menus

1. Selecting Elements

Tip: Store your selection in a variable so you don't re-select every time.
const box = document.getElementById("box");

2. Reading & Changing Content

3. Changing CSS with JavaScript

4. Toggling Classes (the clean way)

Instead of setting many styles one by one in JavaScript, define a class in CSS and switch it on or off. This is how most professional interactive pages work.

/* CSS */
.box { transition: all 0.3s ease; }
.box.active { background: gold; transform: scale(1.2); }
// JS
const box = document.getElementById("box");
box.addEventListener("click", function () {
  box.classList.toggle("active");
});

5. Listening for Clicks

// Demo
const btn = document.getElementById("myButton");
btn.addEventListener("click", function () {
  document.body.style.backgroundColor = "lightyellow";
});

6. Show / Hide Elements

7. Creating & Removing Elements

// Demo
const output = document.getElementById("output");
const p = document.createElement("p");
p.textContent = "Hello world";
output.appendChild(p);

Debugging with the Console

Open your browser's Developer Tools (right-click → Inspect → Console, or Cmd/Ctrl + Shift + J). The Console is where you check whether your code is doing what you think it is.

Common bugs to watch for:

Project Introduction: Clickable Page (5%) DUE: Week 6 — 9/30 

Build a single web page that responds to user interaction. Clicking elements should trigger visible changes such as content updates, CSS transitions, color or style changes, animated movement, or the appearance and disappearance of elements.

Plan the logic in plain English before writing code. Your grade will emphasize clear logic, working JavaScript, purposeful interaction, and a coherent visual design.

Minimum Requirements

Logic Steps (required)

At the very top of your <script> tag, before any code, write your numbered logic steps as a commented list. Example:

/*
  1. Select the button and the box.
  2. When the button is clicked, run a function.
  3. Inside the function, toggle the "active" class on the box.
  4. The .active class in CSS changes color and size with a transition.
  5. Also change the button's text to say "On" or "Off".
*/

This comment block is part of your grade. Without it, the project is considered incomplete.

Workshop (Thursday)

Bring your idea and a first draft of your logic steps. We'll work them out together and start coding. During the workshop you may:

Some starting ideas