The DOM Core Document Object
As youâd expect, the document
object is the Core interface to the web-page document. It
provides methods to create and remove page elements, as well as control
where they occur in the page. It also provides two popular methods for accessing page elements: getElementById and getElementsByTagName.
The getElementsByTagName method
returns a list of nodes (NodeList)
representing all page elements of a specific tag:
var list = document.getElementsByTagName("div");The list can then be traversed, and each node processed for whatever reason.
Tip
If the document has a DOCTYPE of HTML 4.01, all element references are in uppercase. If the document is XHTML 1.0 and up, the element tags are in lowercase. Iâve found that most browsers accept uppercase element tags regardless of doctype.
Iâve used getElementsByTagName
to manage most of my DHTML effects, by encapsulating all dynamically
accessible content within DIV tags and then loading all of these
elements into a library of customized objects after the page
loads.
To demonstrate getElementsByTagName, Example 10-8 also
uses a frameset to load a source
document in one pane and the script document in another.
Example 10-8. Frameset opening sample page and active page with script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Highlighting</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> ...
Get Learning JavaScript now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
