HTML and CSS Reference
In-Depth Information
The JavaScript program you'll design will need to use recursion to navigate through
the entire structure of Jorge's article. As it proceeds through the article, it will record each
element, attribute, and text node and display those nodes in a nested list alongside the
article text. The CSS styles for the nested list already have been created for you; your only
job will be to generate the HTML code of the nested list. Jorge also wants your code to
keep a running count of the total number of nodes, element nodes, attributes, and text
nodes, including text nodes containing only white space.
Complete the following:
1. Using your text editor, open
nodestxt.htm
and
treetxt.js
from the tutorial.14\case2
folder. Enter
your name
and
the date
in the comment section, and then save the files
as
nodes.htm
and
tree.js
, respectively.
2. Go to the
nodes.htm
file in your text editor and add a
link
element to connect the
document to the
tree.css
style sheet. Also add a
script
element to connect the file
to the
tree.js
JavaScript file.
3. Take some time to study the contents and structure of the document and then close
the file, saving your changes.
4. Go to the
tree.js
file in your text editor. Declare the following global variables:
nodecount
to keep a running count of all of the nodes in the source document;
elemcount
to count the element nodes;
attcount
to count the attribute nodes;
textcount
to count the text nodes; and
wscount
to count the text nodes containing
white space only. Set the initial value of all of these variables to
0
.
5. Insert a command to run the setup() function when the page is initially loaded by the
browser.
6. Create the
writeelemli()
function. The purpose of this function is to create a single
list item for the node tree diagram based on the contents of an element node. The
structure of the list item is shown in Figure 14-68.
Figure 14-68
list item displaying information about an element node
LI
“+--”
SPAN
class=“elemLI”
<
elem att1
='
value1
'
att2
='
value2
' … >
The function has two parameters:
elemnode
, which represents the element node from
the source document on which the list item is based, and
nestedlist
, which represents
the nested list that the list item will be appended to. Add the following commands to the
function:
a. Create a list item element named
lielem
containing the text string
+--
.
b. Create a
span
element named
spanelem
. Set the
class
attribute of the
span
ele-
ment to
elemli
. (Hint: Use the
className
property to set the value of the
class
attribute.)
c. Declare a variable named
elemtext
setting its initial value to the text string
<
elem
where
elem
is the node name of the element specified in the
elemNode
parameter.
