Recap

Grade 11, page 10 of 10. A one-minute read.

  • The DOM (Document Object Model) is the browser's live, tree-shaped model of a web page. Change the DOM and the page updates instantly.
  • document is the object at the top of the tree.
  • Select elements with getElementById("id"), querySelector(selector) (first match) and querySelectorAll(selector) (all matches, as a NodeList).
  • Selectors: tag, .class, #id, parent child. No match gives null.
  • textContent changes text safely. innerHTML changes HTML, but never use it with user input (XSS danger!).
  • Change styles with element.style.propertyName (camelCase), or better, with classList.add/remove/toggle/contains.
  • Attributes: properties like src, href, value, checked, or getAttribute/setAttribute. Custom data lives in data-* attributes and dataset.
  • Create elements with document.createElement, add them with append, prepend, before or after, and remove them with remove().
  • Data in, page out: build the page from arrays of objects using loops and functions.

Reading is step one

CurlyScript turns these notes into a game: short questions, an explanation after every answer, and a test at the end of each grade. Free, with nothing to sign up for.

Start learning