Post on 31-Dec-2015
transcript
Meet the Document Tree
Your roadmap to Web DesignYour roadmap to Web Design
Topics for Today
Elements Document Tree Ancestors and Descendants Parents and Children Siblings
Elements
Every XHTML Web page consists of content that is organized into elements.
An element is anything that you define with XHTML tags.
Though you wouldn't know it just from looking at a page, each element is a little box on the page.
These boxes form an invisible document tree.
Document Tree <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Sample</title> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html>
Here’s what they look like
Document Tree A document tree is a conceptual diagram
that shows the relationships among elements in a hierarchy rather than as boxes within boxes.
You'll never see a document tree on your computer screen, because you don't need to. It's just a means of illustrating element relationships in a hierarchical fashion.
It's a lot like how you'd use a hierarchy to illustrate relationships among individuals in a family tree.
The document tree for the sample page shown above looks like this.
Hey, I’m a Doc Tree!
Notice the hierarchy…
Ancestors and Descendents The term ancestor refers to any element that is
above other elements in the tree. It doesn't matter how many levels higher the element is. For example, in our document tree, the body element is the ancestor to all other elements in the tree.
Ancestors and Descendants Coding view…
Ancestors and Descendants The term descendant refers to any element that's
below some element in the document tree. It doesn't matter how many levels below it is. It just has to be lower in the tree to be a descendant. In the image below, all of the yellow elements are descendants of the body element.
Ancestors and Descendants Code View
Parents and Children The term parent refers to an element that is
connected to, and exactly one level above, some other element.
An element might have many ancestors, but it only has one parent.
In our sample document tree, the body element is the parent to the ul element (only).
The ul element is the parent to all of the li elements.
Parents and Children
Code View…
Child
A child element is one that is directly connected to, and exactly one level below, its parent.
In our sample document tree, the ul element is child to the body element. The li elements are children of the ul element.
Child
Code View…
Siblings
Elements that share the same parent are siblings. In our document tree, the li elements are siblings because they share the same parent, the ul element.
Siblings
Code View…