HTML and CSS Reference
In-Depth Information
Working with Attributes
Norene is pleased with the table of contents your script generated for her document.
Now she wants the entries in the TOC to contain hypertext links to the headings they
represent. Again, it is useful to write out the HTML code for the proposed change so
you know what element and text nodes you'll need to create in your code. Making this
change involves two steps, which are illustrated in Figure 14-33:
1.
Add an
id
attribute to the heading element (if it doesn't already have one) to mark
its location on the Web page.
2.
Change the content of each list item to a hypertext link pointing to the correspond-
ing heading element.
Figure 14-33
linking list items to page headings
heading elements
with id values
<h1 id="
head1
">Preamble</h1>
…
<h1 id="
head2
">Articles of the Constitution</h1>
…
<h2 id="
head3
">Legislative Branch</h2>
…
<h3 id="
head4
">Section 1: The Legislature</h3>
…
<h3 id="
head5
">Section 2: The House</h3>
…
<h3 id="
head6
">Section 3: The Senate</h3>
…
table of contents
with links to each
heading tag
<ol>
<li><a href="
#head1
">Preamble</a></li>
<li><a href="
#head2
">Articles of the Constitution</a></li>
<ol>
<li><a href="
#head3
">Legislative Branch</a></li>
<ol>
<li><a href="
#head4
">Section 1: The Legislature</a></li>
<li><a href="
#head5
">Section 2: The House</a></li>
<li><a href="
#head6
">Section 3: The Senate</a></li>
...
Before you can create and add the
id
and
href
attributes, you must understand how
to work with attributes in the document object model.
Creating Attribute Nodes
An attribute node represents an attribute that can be created and attached to an ele-
ment node. However, unlike element and text nodes, attribute nodes are not part of the
node tree because they are not counted as children of element nodes like text nodes are.
Figure 14-34 shows a representation of the relationship between an attribute node and
the element node with which it is associated.
