HTML and CSS Reference
In-Depth Information
You'll use familial references in the following function to create the list of heading ele-
ments. The initial code for the function is as follows:
function createList(source, TOCList, headings) {
for (var n = source.firstChild; n != null; n = n.nextSibling) {
}
}
This function has three parameters. The
source
parameter is the source article contain-
ing the child nodes on which you'll base the TOC; the
TOCList
parameter specifies the
ordered list into which the list items are inserted; and the
headings
parameter contains
an array of the element names on which the TOC entries are based. The initial code for
this function uses a
for
loop to move through all of the children of the object parameter,
sibling by sibling.
You'll add this function to the
toc.js
file now.
To insert the createList() function:
◗
1.
Below the makeTOC() function within the
toc.js
file, insert the following code, as
shown in Figure 14-15:
function createList(source, TOCList, headings) {
/* Loop through all of the child nodes of object,
sibling by sibling until no child nodes are left */
for (var n = source.firstChild; n != null; n = n.nextSibling) {
}
}
Figure 14-15
looping through the child nodes collection in the source document
starts the loop with
the first child node
continues as long as
the child node exists
each time thro
u
gh the loop,
goes to the next sibling node
◗
2.
Save your changes to the file.
You'll call the createList() function from the makeTOC() function you created earlier.
The values of the
source
and
TOCList
parameters come from the
source
and
TOCList
variables you created earlier. The value of the
headings
parameter will be based on the
following array of element names matching the names of the
h1
through
h6
headings:
var headings = [“H1”, “H2”, “H3”, “H4”, “H5”, “H6”];
The array is ordered from the element representing the highest level in the TOC (the
h1
element) down to the lowest (the
h6
element). The element names are in uppercase
because that is how JavaScript interprets the names of element nodes; you'll learn more
