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

Try these exercises in the browser console:

Last updated 3 years ago