> For the complete documentation index, see [llms.txt](https://bootcamp.shetechitaly.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bootcamp.shetechitaly.org/day1/01-02.md).

# 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](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)

## 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