- The Document Object Model (DOM) is a representation of an HTML document
at run time as a collection of Javascript objects and methods; allows
a Web page to be queried and modified dynamically under the control
of Javascript.
- History:
- In the early days of the Web, every browser implemented its own
model; almost impossible to write interesting Javascript that ran
on every browser.
- The W3C has specified DOM standards since 1998, but browser
implementation has been slow. Five years later, still hard to write
cross-browser Javascript.
- Today things are much better, though still not perfect. Many
interesting effects can be achieved without worrying about browser
compatibility (assuming you don't still need to support IE 4.0!),
though there are still a few areas of incompatibility (e.g. 3 different
APIs for AJAX).
- Problem with standards for the Web:
- Application writers can't depend on a feature unless "every"
browser in the Internet supports it.
- When a new DOM feature is defined:
- Browser implementers may or may not implement it.
- Even once the feature is implemented in the major browsers,
old browsers persist for a long time.
- Fixing incompatibilities can break applications!
- It can easily take 5-10 years before a new feature is widespread
enough for application developers to trust it.
- Developers' choices about using new features:
- Don't use feature unless it's universally available (may have to
sacrifice cool behaviors)
- Depend on the feature, but your application won't work on some browsers.
- Check for the existence of the feature at runtime:
- Use it if it exists.
- Take an alternative approach if it doesn't exist.
- Adds complexity to the application (e.g., hard to test).
- Is application for consumer or commercial use?
- For consumer use, more likely to have really old browsers around.
- For commercial use, companies (especially larger ones) will
probably have up-to-date browsers.
- How to find out where the feature is implemented?
- For this class, just use Firefox and don't worry about compatibility
with other browsers.
- Node: superclass for all the elements and text of an HTML document:
- <html>, <body>, <p>, #text, etc.
- Key links: parentNode, nextSibling, prevSibling,
firstChild, lastChild.
- Simple example: <p>Sample <b>text</b> display</p>
- Node name is element type or #text.
- Important to use XHTML, since it provides an unambiguous hierarchy.
- Overall document structure:
- window (global)
- window.document
- How to find HTML elements in Javascript?
- Change the content of an element:
element.innerHTML = "This text is <i>important</i>";
Replaces any existing content (but retains existing element attributes).
- Change an image (e.g., toggle appearance on clicks):
img.src="newImage.jpg";
- Make element visible or invisible (e.g., for expandable sections):
- Invisible:
element.style.display = "none";
- Visible:
element.style.display = "";
Or, to be safe, save the original style.
- When display is "none" the element occupies no
screen space.
- Alternatively, can make the element invisible while occupying
screen space:
element.style.visibility = "hidden";
- Change the appearance of an element (e.g., highlight when mouse passes
over):
- Change its class:
element.className = "active";
- Use separate CSS styles for each appearance.
- Generally a bad idea to modify style directly in the element, such as
element.style.color = "#ff0000";
- With hierarchical CSS rules you can potentially do some fancy things
just by changing the class of an ancestor:
table.oddOnly tr.even {
display: none;
}
table.evenOnly tr.odd {
display: none;
}
- Redirect to a new page:
window.location.href = "newPage.html";
- Create a new element and add it to an existing one:
element = document.createElement("P");
parent.insertBefore(element, sibling);
parent.appendChild(element);
- Simple dialog boxes:
alert("Please click to continue");
if (confirm("Are you sure you want to ...?")) {
...
}
name = prompt("Enter user name here:");
- Coordinates (needed, for example, to position a pop-up menu next to
an existing element, or for drag-and-drop):
- The origin is at the upper left; y increases as you go down.
- Read location with element.offsetLeft, element.offsetTop
These are relative to element.offsetParent, which is not necessarily
the same as element.parentNode (only divs, tables and a few
other elements act as offset parents)
- To get overall location within the document, must work upwards
through the complete chain of offsetParent nodes combining
all of the offsets.
- Dimensions: offsetWidth and offsetHeight include
contents, padding, border, but not margin.
- Positioning elements: