Pathwise

Manuals / JavaScript / Chapter 5

B · Browser · beginner · Week 3 · Chapter 5 of 14

DOM basics & events

The DOM is the browser's tree representation of HTML. querySelector finds elements. textContent and classList update them. addEventListener handles clicks, input, and keyboard. Build a todo app without React — this is how frameworks work under the hood.

Path progress
30%

Step 1 of 5

Select and modify

document.querySelector(".class") returns first match. querySelectorAll returns NodeList. Prefer textContent over innerHTML for user text (XSS safety).

Select and modifyDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Select and modifydrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

<!-- index.html -->
<h1 id="title">Hello</h1>
<button id="btn">Change</button>

<script>
  document.getElementById("btn").addEventListener("click", () => {
    document.getElementById("title").textContent = "Updated!"
  })
</script>

Do this now

Create index.html with a heading and button. JS changes heading text on click.

Was this step clear?
Chapter learning outcomes
  • querySelector / querySelectorAll
  • Creating & removing nodes
  • Events & delegation
  • classList & data attributes
  • localStorage preview

Clear these before you leave

Side quest

Todo app v1

Full todo: add, toggle complete (classList), delete, filter, localStorage. No framework. One HTML file or small module split.