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

Custom Search