HTML and CSS Reference
In-Depth Information
EXPLANATION
(
CONTINUED
)
2
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.
3
The parent node's first child is
document.childNodes[0].childNodes[0]
. This por-
tion of the tree is assigned to the variable
Child
.
4
The name of a node is found in the
nodeName
property. The parent node is
HTML
,
the highest element in the HTML hierarchy.
5
The
nodeName
of the first child of the parent node is
HEAD
.
6
The next node in the hierarchy is the child of the
HEAD
element. It is the
title
element:
<html>
<head>
<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:
<html>
<head>
<body>
11
The node directly below the body is the
h1
element:
<body><h1>Walking with the Nodes</h2>
12
The node below the body (i.e., the last child of the body element),
document.child-
Nodes[0].lastChild.nodeName
, is the
h1
element.
13
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.
