HTML and CSS Reference
In-Depth Information
The first node, childNodes[0] , is the first node in the HTML hierarchy, the parent
node. This node is assigned to a variable, Parent . The only reason to create the
variable is to cut down on the amount of typing and propensity for errors when
we go further down the document tree. Note: Watch your spelling when working
with the DOM in JavaScript.
The parent node's first child is document.childNodes[0].childNodes[0] . This por-
tion of the tree is assigned to the variable Child .
The name of a node is found in the nodeName property. The parent node is HTML ,
the highest element in the HTML hierarchy.
The nodeName of the first child of the parent node is HEAD .
The next node in the hierarchy is the child of the HEAD element. It is the title
7 Continuing the walk down the DOM tree, we come to the text node. It contains
the text between the <title> </title> tags. The name of the text node is preceded by
a # mark.
8 The actual text between the <title></title> tags is found in the nodeValue property
of the node.
9 Using the firstChild property to simplify things, the first child of the parent again
shows to be the HEAD element.
10 The last child of the HTML parent is the BODY element:
The node directly below the body is the h1 element:
<body><h1>Walking with the Nodes</h2>
The node below the body (i.e., the last child of the body element), document.child-
Nodes[0].lastChild.nodeName , is the h1 element.
The parent's last child node's type is 1. An element node type is type 1, an attribute
type is type 2, and a text node is type 3. See Figure 15.7.
Search WWH ::

Custom Search