Summary: The Document Object Model

Review what we learned about the Document Object Model.

We'll cover the following

Key points

  • The Document Object Model is a way of representing a page of HTML as a tree of nodes.

  • The DOM has a number of methods that can be used to access elements on a page.

  • The DOM provides a number of methods that can be used to navigate around the DOM tree.

  • An element’s attributes can be accessed using the getAttribute() method and updated using the setAttribute() method.

  • The innerHTML property can be used to quickly insert raw HTML into an element.

  • The createElement() and createTextNode() methods can be used to create dynamic markup.

  • Markup can be added to the page using the appendChild() and insertBefore() methods.

  • Elements can be replaced using the replaceChild() method and removed using the remove() method.

  • The CSS properties of an element can be changed by updating the style property.

Now that we’ve learned how to navigate and dynamically update the markup of a web page, it’s time to start interacting with it in this next chapter. We’ll also learn how to handle events—after the quiz and challenge, of course!

Get hands-on with 1400+ tech skills courses.