MEPX
Chapter 13 of 16All chapters
  1. 1Introduction
  2. 2Syntax and statements
  3. 3Variables and scope
  4. 4Data types
  5. 5Comparison and coercion
  6. 6Strings
  7. 7Numbers and maths
  8. 8Arrays
  9. 9Objects
  10. 10Functions
  11. 11Conditions and loops
  12. 12Classes
  13. 13The DOM
  14. 14Events
  15. 15Promises and async
  16. 16Modules

Chapter 13 of 16

The DOM

Reading and changing the page.

Finding elements

document.querySelector takes a CSS selector and returns the first match, and querySelectorAll returns all of them as a static list. Both are enough for almost everything.

  • textContent sets text safely. innerHTML parses markup, so never feed it untrusted input.
  • classList.add, remove and toggle are how you drive CSS state.

Building nodes

document.createElement makes an element, append puts it in place, and remove takes it out. Building a string and assigning innerHTML once is faster than many small insertions.