The Document Object Model, or DOM, is a model that web browsers use to turn the HTML of a web page into the content of that page. A web browser uses the HTML on your page to render the page in the browser window, and we can use this fact to change items on a page without reloading the page.
The DOM is similar to a family tree in that there is a single node, or object in the tree, at the top that branches out into other node. In a family we would refer to the top node as the parent, while nodes underneath the parent are children, grandchildren, etc. The parent/child relationship is important in the DOM, as you can refer to the children of a node or the parent of a node. The image below shows the Document Object Model for a page on the YHSCS website.
Complete the following tutorials from the W3Schools website. You should take no more than five class periods to do so.