181Chapter 14Document Object (Web hosting ecommerce) Model Essentialssimple HTML document to
181Chapter 14Document Object Model Essentialssimple HTML document to see how this system works. Listing 14-1 is formatted to show thecontainment hierarchy of elements and string chunks. Listing 14-1: A Simple HTML Document
This is the one and only paragraph on the page.
What you don t see in the listing is a representation of the documentobject. The documentobject exists automatically when this page loads into a browser. Importantly, the documentobject encompasses everything you see in Listing 14-1. Therefore, the documentobject has asingle nested element: the htmlelement. The htmlelement, in turn, has two nested elements: headand body. The headelement contains the titleelement, while the titleelement con- tains a chunk of text. Down in the bodyelement, the pelement contains three pieces: a stringchunk, the emelement, and another string chunk. According to W3C DOM terminology, each container, standalone element (such as a brele- ment), or text chunk is known as a node a fundamental building block of the W3C DOM. Nodes have parent-child relationships when one container holds another. As in real life, parent-child relationships extend only between adjacent generations, so a node can have zeroor more children. However, the number of third-generation nodes further nested within thefamily tree does not influence the number of children associated with a parent. Therefore, inListing 14-1, the htmlnode has two child nodes, headand body, which are siblingsthat sharethe same parent. The bodyelement has one child (p) even though that child contains threechildren (two text nodes and an emelement node). If you draw a hierarchical tree diagram of the document in Listing 14-1, it should look like theillustration in Figure 14-3. If the document s source code contains a Document Type Definition (in a DOCTYPEelement) above the tag, the browser treats that DOCTYPEnode as a sibling of the HTML ele- ment node. In that case, the root documentnode contains two child nodes. The W3C DOM (through Level 2) defines 12 different types of nodes, 7 of which have directapplication in HTML documents. These seven types of nodes appear in Table 14-3 (the restapply to XML). Of the 12 types, the three most common are the document, element, and texttypes. All W3C DOM browsers (including IE5+, Moz1, Safari, and others) implement the threecommon node types, while Moz1 implements all of them. Note