Working with Document Nodes and Styles - HTML, CSS, and Dynamic HTML - page 987

Figure 14-37 writing the heading id value

increases the entryNum
variable every time a
new headin g is found

writes an id to the
heading element only
if no id is present

◗

2. Save your changes to the file.

Looping Through the attributes Collection
You can examine each HTML attribute associated with an element using the following
attributes collection:

node .attributes
Each attribute's name is referenced using the nodeName property, and each attribute's
value is referenced using the nodeValue property. For example, the following for loop
writes a text string containing each attribute's name and value, enclosed in quotes, for
the document's first section element:

var s1 = document.getElementsByTagName(“section”)[0];
var attText = “”;
for (var i = 0; i < s1.attributes.length; i++) {
attText += s1.attributes[i].nodeName;
attText += “=”;
attText += “'” + s1.attributes[i].nodeValue + “' “;
}
The attributes collection is an example of a named node map , which is an unordered
list of nodes that can be referenced by their names—in this case, attribute names. You
also can reference the attributes collection using an index number, as the previous
code demonstrates. However, be aware that there is no standard ordering of attributes
by index number.

Inserting Links
Next, you need to revise the structure of the TOC node tree to change each list item to a
hypertext link pointing to the corresponding heading in the source document. The value
of the href attribute for each list item will be

# id

where id is the id value assigned to the corresponding heading. You'll also add the id
value to each list item in the TOC using the format

TOC id