Getting Down with ...

by ...

Lesson n:

The Document Object Model (DOM) is set of conventions by which web browsers access and manipulate objects within a web page.

What is most important to us as web designers learning CSS is the way the DOM organizes elements in a web page in a mathematical tree. We need to understand this tree structure and the concepts associated with it to use advanced CSS selectors.

HTML Element Tree

Here is the element tree for the inline.html document that you worked with in the exercises from the last lesson:

HTML DOM Tree Diagram

We will use this example to illustrate the relationships among elements in the tree.

Relationships Among Elements in the Tree

The root of our element tree is the html element. It is the only element at the top level of the tree.

A path is a sequence of connected elements moving down from a given element away from the root. Each element in a path has to be below the previous one, so section--p--sub and footer--a--strong are paths, but a--footer--a is not, because the first connection, a--footer, is going up instead of down.

With an understanding of path, it is possible to describe the following relationships among elements in our element tree:

Parent
The element connected above another element in the element tree is called the parent of that element. In our example, the h1, section, and the footer elements all have the body element as their parent.
Child
The element connected below another element in the element tree is called the child of that element. In our example, the section element has four children, all of which are paragraphs.
Sibling
Two elements with the same parent element are called sibling elements. The two a elements that are children of the footer element are siblings. So are the four p elements that are children of the section element.
Ancestor
Any element that preceeds a given element in the path from the root (html) to the given element is called an ancestor of that element. The body element is the ancestor of all the p elements. The footer element is the ancestor of two of the strong elements. The parent of a given element is also its ancestor, but so is its parent's parent, and so forth.
Decendent
If a given element has another element as an ancestor, the given element is called a decentent of the other element. The kbd element is the decendent of the section element. Two of the strong elements are decendents of the footer element.

Exercises:

  1. Name all the ancestors of the kbd element.
  2. Name all the decendents of the footer element.
  3. Name all the siblings of the code element.
  4. Which element in this document has the most child elements?
  5. Sketch out an element tree on a piece of paper for a document that has elements that satisfy each of the following relationships:
    • An html element at the root (top) of the element tree.
    • The head element has the required meta and title elements as children to be a valid html 5 document, and a style child element for CSS.
    • The body element has a header element, two section elements, and a footer element, in that order, as children.
    • The header element has an h1 element followed by a nav element as children.
    • The nav element has five a elements as children.
    • Both section elements have the same children: an h2 element followed by an h3 element followed by an ol element followed by another h3 element and then another ol element.
    • All the ol elements have four li elements as children.
    • The footer element has two a elements as children, and each of the a elements has a single strong element as a child.
  6. Create a new document named webskills.html with all the elements from the element tree you drew in the previous exercise. (Note: You should work from the diagram you created in the previous exercise. Do not include any data or meta-data).
  7. Add a line at the top of the document containing the DOCTYPE: 
    <!DOCTYPE html>
  8. Use the table in this document to fill in the contents of each element. When you finish, your web page should look something like this. You will style this document in the next lesson.