Training Trains Internship
Student login
← JavaScript learning path
JavaScript · Module 7 of 10

The DOM

Use the Document Object Model to find, change and create elements on a page.

📖 Key ideas

  1. The DOM is the browser's tree of page elements that JavaScript can change.
  2. document.querySelector("#id") finds one element; querySelectorAll finds many.
  3. textContent changes text; classList.add/remove changes classes.
  4. createElement + append adds new elements.
  5. Avoid innerHTML with user input (XSS risk).
💡 Real-life example: The DOM is like a family tree of the page: you can find any member and change their outfit.
DOMTree of page elements
querySelectorFinds the first matching element
textContentThe text inside an element
classListAdds or removes CSS classes