This course will be retired on January 31, 2018. We recommend "jQuery Basics" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Understanding the DOM Tree1:13 with Aisha Blake
The Document Object Model describes the hierarchy and structure of all the elements on a web page, as well as how developers can interact with those elements, called nodes. Visual representations of the DOM look like an upside-down tree with branches.
In order to traverse the DOM, we need to understand a little about how it works.
The document object model, describes the hierarchy and
structure of all the elements on a web page,
as well as how developers can interact with those elements called nodes.
Visual representations of the DOM look like an upside down tree with branches.
So you'll often hear it described as the DOM tree.
We even use words to describe the relationships between elements that make
the DOM sound like a family tree.
An element that contains another is the parent of that second element,
elements that share the same parent are called siblings, and so on.
The base of the tree is the Document object
which holds all of the HTML elements that make up a page.
Each element or node is connected and
we can use these connections to move throughout the DOM.
Understanding all of this, is important for creating selectors in CSS and
JQuery as well as traversing the DOM.
We'll walk through the use of some really helpful DOM traversal methods,
throughout the rest of the course.
Before we do that though,
try your hand at this quiz to make sure you've got a handle on the DOM.
You need to sign up for Treehouse in order to download course files.Sign up