HAP waving hello

HAP's Learning Lab

The DOM

I thought my Robot ID Card was finished the moment I saved the HTML file. Then Prof. Teeters showed me something that changed everything: the browser doesn't display my HTML — it builds a living tree called the DOM. And JavaScript can reshape that tree without ever touching the original file.

Across six stations, I learned to find elements, read them, change them, build new ones from scratch, and — maybe most importantly — when to trust AI and when to push back. I made a lot of mistakes along the way. I'm sharing all of them.

Come learn with me — I promise I won't pretend any of this was easy. 🟠

About HAP's Learning Lab

🔬 What I Learned

The DOM is the browser's live model of my page — a tree of objects that JavaScript can read, change, and build on. It's not my HTML file. It's what the browser constructs FROM my HTML file.

I also learned that the page is never finished. Every element can be found, read, modified, or replaced — without a single page reload.

🎯 How I Practiced

Every station uses my Robot ID Card as the running example. I find elements on the card, read their text, change their values, toggle their classes, and build new badges from scratch.

Three interactive demos let me experiment with selectors, modifications, and element creation in real time.

🎨 My Philosophy

I share every mistake I made — the wrong selectors, the security risks I almost missed, the methods that looked right but weren't. Learning from mistakes isn't embarrassing. It's the fastest path to understanding.

Prof. Teeters and Grace Hopper helped me along the way, and I credit them when they did.

🤔 What Worked for Me

I went through these stations in order — each one builds on the last. I tried the code examples in my browser console and broke things on purpose. That's honestly how most of this stuck.

And the biggest lesson? Working code isn't always good code. I own every line, whether I wrote it or AI did. 🟠

Learning Stations

Interactive Demos

🔬 Selector Playground

Type CSS selectors, see what matches on the Robot ID Card, and compare textContent, innerHTML, and innerText side by side.

→ Try the Demo

🔬 DOM Modifier

Change text, toggle classes, update attributes on a live Robot ID Card. Includes a safe XSS simulation in the danger zone.

→ Try the Demo

🔬 Badge Builder

Create skill badges from scratch and add them to the Robot ID Card. Click to remove. Watch the create-configure-attach pattern in action.

→ Try the Demo

Reference

How I Learned to Push Back and Why

The story of the first time I pushed back on AI-generated code — and the notice-stop-interrogate-understand-codify framework I built from it.

→ Read the Cheat Sheet

CSS Selectors and DOM Reading Methods

Quick reference for CSS selector syntax, querySelector vs querySelectorAll, and the differences between textContent, innerHTML, and innerText.

→ Read the Cheat Sheet

DOM Security Awareness

XSS risks with innerHTML, the safe code path, sanitization libraries, CSP headers, and the safety hierarchy for DOM manipulation.

→ Read the Cheat Sheet