HTML and CSS Reference
In-Depth Information
display
property to block. Then I modify the
this.innerHTML
to read
“Collapse All”
.
That changes the link text to
Collapse All
, which not only alters the display, but also
causes the same function to hide all the answers when the user clicks on the link again.
Then the function returns false so that the link itself is not processed.
When the
onclick
handler is set up, I add the link to the document. I want to insert the
link immediately before the list of frequently asked questions. To do so, I get a reference
to its
<div>
using
getElementById()
and then use
insertBefore()
to put it in the right
place:
faq = document.getElementById(“faq”);
faq.insertBefore(expandAllDiv, faq.firstChild);
Table 15.3 contains a list of methods that can be used to modify the document. All of
them are methods of elements.
TABLE 15.3
Methods for Accessing the DOM
Method
Description
Adds the element to the page as a child of the
method's target
appendChild(element)
Inserts the element
new
before the element
ref
on the list of children of the method's
target.
insertBefore(new, ref)
Removes the attribute with the supplied name
from the method's target
removeAttribute(name)
Removes the child of the method's target
passed in as an argument
removeChild(element)
Replaces the child element of the method's
target passed as the
inserted
argument with
the element passed as the parameter
replaced
replaceChild(inserted, replaced)
Sets an attribute on the method target with
the name and value passed in as arguments
setAttribute(name, value)
There's one other big change I made to the scripts for the page. I added a call to a new
function in the handler for the click event for the questions on the page:
updateExpandAllLink();
That's a call to a new function I wrote, which switches the
Expand All / Collapse All
link if the user manually collapses or expands all the questions. When the page is
opened, all the questions are collapsed, and the link expands them all. After the user has
