JavaScript · Lesson 7 of 8
The DOM
Selecting elements and changing text, classes and styles.
The DOM (Document Object Model) is the browser's live version of your HTML that JavaScript can read and change.
- Select:
document.querySelector(".card")(first match),querySelectorAll(all). - Change text:
el.textContent = "…"(safe — never inserts HTML). - Classes:
el.classList.add / remove / toggle("active"). - Create:
document.createElement("li")thenlist.append(li).
Prefer textContent over innerHTML for user input — innerHTML can run injected code.
Try it yourself
Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.
Key points
- querySelector uses CSS selectors.
- textContent is safe for text.
- classList toggles styles cleanly.
Quick check
Which is safest for showing text a user typed?
textContent never parses HTML, so injected tags or scripts can't run.
Practice task
Render a list of three job cards from an array of objects, each with a title and city, using createElement and textContent.
Interview corner
What is the DOM?
The browser's tree of objects representing the page. JavaScript reads and changes it to update what the user sees.
Why is innerHTML risky?
If it includes user input, injected HTML or scripts can run (XSS). Use textContent or sanitise first.
Further reading
Official documentation, linked for deeper study. These are outside sites; this lesson's text is our own.
Original lesson written by the InfoparkDaily team · © 2026 InfoparkDaily · Free to learn — no paid course or subscription.