DMS102/CSC170D: Introduction to Web Development
Spring 2013
Assignment 8: DOM
For each of the following questions, start with the example document
linked here: dom-example.html. You can
of course also experiment with other documents as you explore the DOM.
- [4 pts]
Add a script element at the end of the document body that asks
the user for some text and sets both the toplevel heading and the
document title to that text.
- [4 pts]
Add a script element at the end of the document body that asks
the user for some text and adds it as a new item in the second
list.
- [4 pts]
Add a script element at the end of the document body that asks
the user for an element id and then makes the element with
that id (if any) disappear. Be sure to check that there is
such an element. Lookup the
display CSS property
(and corresponding property of the
element's style object) for how to make it
disappear.
- [4 pts]
Add a script element at the end of the document body that first
asks the user for an element id. If there is such an element, ask
the user for a color name and set the element's
style
object's color property to that color.
- [4 pts]
Add a script element at the end of the document body that asks the
user for an HTML class name and a color name, and then sets the
color of all the elements of that HTML class to the given color.
Things to think about
-
You need to know the basic DOM methods for getting elements of the
document:
getElementById returns a single element
(or undefined). getElementsByTagName
and getElementsByClassName return (possibly empty)
collections of elements (technically, these
are NodeList objects).
-
You need to know how to iterate through the elements in the
collections returned by
getElementsByTagName
and getElementsByClassName.
-
You need to know how to use an element's
style
property to change the element's appearance. The properties of
a style object are the CSS properties, with the names
adjusted to use Javascript identifiers (i.e., CamelCase rather
than hyphens).
-
For this part of the assignment, we make our scripts run after
the document has loaded by putting the code at the end of
the
body element. Very soon we'll learn how to
trigger behaviors from mouse clicks and other events.
Last update: Friday, 05-Apr-2013 14:51:55 EDT