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.
Search WWH ::

Custom Search