Step 2: playing with the DOM

Before we move on making our app dynamic, we must to be sure to understand what the DOM actually is and how it works.

DOM Recap

  • The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document as a tree.

  • document.body returns the body of the page

  • document.querySelector returns the first Element node within the document, in document order, that matches the specified selectors

  • element.innerHTML represents the "rendered" text content of a node and its descendants.

More on MDN

Exercises

Try these exercises in the browser console:

  • Print the body of the page

  • Find the element with id task-list

  • Change the text of one element

PreviousStep 1: HTMLNextStep 3: add a new task

Last updated

Was this helpful?