HTML and CSS Reference
In-Depth Information
Notice that element nodes have no values. It might seem that an element node's value
should be the content it contains, but that content is already its own node. If you want
to change the text contained within an element, you must modify the value of that ele-
ment's text node. For example, in the
h1
heading
<h1 id=”title”>History Online</h1>
you could change the text from
History Online
to
Historic Documents Online
by replac-
ing the
h1
element's child node (which, in this case, is a text node) with a new text node.
The code would be
var title = document.getElementById(“title”);
title.firstChild.nodeValue = “Historic Documents Online”;
This code sample uses the
firstChild
property because the text node is the first—
and only—child of the
title
element.
Determining Node Properties
• To determine the type of object a node represents, use the property
node
.nodeType
where
node
is a node object in the node tree. The
nodeType
property returns the
value 1 for elements, 2 for attributes, and 3 for text nodes.
• To return the value of a node, use the following property:
node
.nodeValue
For an element, the value of the
nodeValue
property is
null
. For an attribute, the
value represents the attribute's value. For a text node, the value represents the text
string contained in the node.
• To return the name of a node, use the following property:
node
.nodeName
For elements, the name of the node matches the name of the element in uppercase
letters. For attributes, the node name matches the attribute name. For text nodes, the
node name is
#text
.
To determine whether a particular node is an element node matching one of the six
entries in the
headings
array, you'll use the
indexOf()
array function
array
.indexOf(
value
)
which was first introduced in Tutorial 12, where
array
is a JavaScript array and
value
is a value to be searched for within the array. The
indexOf()
function returns either the
index number or -1 if the value cannot be found in the array. The following command
tests whether the value of
n.nodeName
is found within the array of element names
H1
through
H6
:
var nodeLevel = headings.indexOf(n.nodeName);
If an
h1
element node were encountered,
nodeLevel
would have a value of 0; likewise,
h2
elements would return a value of 1,
h3
elements would return a value of 2, and so
forth. If the node name did not match one of the six heading element names,
nodeLevel
would have a value of -1.
You'll add this command to the
for
loop in the createList() function now.
