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 thesetAttribute()
method. -
The
innerHTML
property can be used to quickly insert raw HTML into an element. -
The
createElement()
andcreateTextNode()
methods can be used to create dynamic markup. -
Markup can be added to the page using the
appendChild()
andinsertBefore()
methods. -
Elements can be replaced using the
replaceChild()
method and removed using theremove()
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 1200+ tech skills courses.