HTML and CSS Reference
In-Depth Information
Figure 14-52
structure of the table of contents versus the source document
<ol>
<li>
Main Head
<ol>
<li>
Subhead
<ol>
<li>
Minor Subhead
</li>
<li>
Minor Subhead
</li>
</ol>
</li>
<li>
Subhead
</li>
</ol>
</li>
<li>
Main Head
<ol>
<li>
Subhead
<ol>
<li>
Minor Subhead
</li>
</ol>
</li>
</ol>
</li>
</ol>
<h1>
Main Head
</h1>
<p>Text</p>
<h2>
Subhead
</h2>
<p>Text</p>
<h3>
Minor Subhead
</h3>
<p>Text</p>
<h3>
Minor Subhead
</h3>
<p>Text</p>
<p>Text</p>
<h2>
Subhead
</h2>
<p>Text</p>
<p>Text</p>
<h1>
Main Head
</h1>
<p>Text</p>
<h2>
Subhead
</h2>
<p>Text</p>
<h3>
Minor Subhead
</h3>
<p>Text</p>
nested list
document elements
Your approach will be to go through the source document one node at a time. Each
time you encounter an
h1
through
h6
heading, you'll check whether the corresponding
entry in the table of contents is displayed or hidden. If the entry is hidden, that heading
and all subsequent elements up to the next heading are hidden. On the other hand, if the
TOC entry is displayed, that heading and all subsequent elements until the next heading
are displayed. The following code provides the general structure of this
for
loop:
var displayStatus = “”;
for (var n = source.firstChild; n != null; n = n.nextSibling) {
if (headings.indexOf(n.nodeName) != -1) {
determine the display status of the TOC entry
}
if (n.nodeType == 1) {
apply the display status to the page element
}
}
This code starts by declaring the
displayStatus
variable with an empty text string as the
initial value. The
for
loop then goes through the nodes in the source document starting
with the first child node and moving to the next sibling until no siblings are left. For each
node, it tests whether the node is a TOC heading; if it is, the code determines the display
status of the matching TOC entry for that heading. Also, each time through the loop, the
display status is applied to the current node—but only if that node represents a Web
page element.
You'll add this
for
loop and these
if
conditions to a function named
expandCollapseDoc() now.
Before changing the dis-
play style of a node, always
confirm that the node
represents a Web page
element by testing that
the value of the
nodeType
property equals 1.
