HTML and CSS Reference
In-Depth Information
Document Object Model
HTML (including XML and XHTML) documents are modelled in memory using a tree
structure called the Document Object Model.
Each document has a single parent node, and this node can have children. These nodes in
turn can be parents of other children. Each node in the tree (except the head node) has one,
and only one parent. All nodes in the tree can have zero or more children.
DOM trees contain several kinds of nodes, the most common of which are element nodes
(which represent tags) and text nodes (which represent the content inside tags).
In order to see the inherent tree structure of a document, open the tasks.html document from
chapter 4, and view it in the “Elements” tab of Chrome's developer tools. Any parent that
has children has an arrow beside it that can be expanded. The overall parent of the whole
document is the
html
tag at the start of the document. This has two children:
head
and
body
,
and each of these have children. Even in this relatively simple document, there are some ele-
ments that are eight generations removed from the
html
element:
