Section 10.5. The DOM Core Document Object | Learning JavaScript, 2nd Edition

10.5. 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.

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> <frameset cols="80%,*"> <frame name="docin" src="/books/4/327/1/html/2/docin.htm" /> <frame name="docout" src="/books/4/327/1/html/2/findelem.htm" /> </frameset> </html>

In this example, the findelem.htm page, shown in Example 10-9, has three page buttons that, when clicked, open prompts for three values: highlight color, source window to open, and element tag for which to search.

Example 10-9. Script page opening another document in a frame and highlighting all elements of a given type

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div {     border: 1px solid #000;     padding: 5px; } </style> <script type="text/javascript"> //<![CDATA[ var highlightColor = "#ffff00"; function changeColor(  ) {   highlightColor=prompt("Enter highlight color (hexidecimal format)"); } function loadPage(  ) {    var pageURL = prompt("Enter page in this domain");    top.docin.location.href=pageURL; } function highlightElements(  ) {    var elemTag = prompt("Enter tag element name to highlight:");    var nodes = top.docin.document.getElementsByTagName(elemTag);    // highlight each    for (var i = 0; i < nodes.length; i++) {         nodes[i].style.backgroundColor=highlightColor;    } } //]]> </script> </head> <body> <div onclick="changeColor(  )"> <p>Click to change highlight color</p> </div> <div onclick="loadPage(  )"> <p>Click to load source page</p> </div> <div onclick="highlightElements(  )"> <p>Click to search for, and highlight, a specific tag</p> </div> </body> </html>

The application opens the source document into the first pane and then finds all elements of a type and highlights them with the given colorin this case, the list item elements (LI), which are highlighted in gray, as shown in Figure 10-2.

Figure 10-2. Highlighting same-tagged elements

I can't load just any document with Example 10-9, though. The JavaScript sandbox prevents me from calling getElementsByTagName for a document that's outside the domain of the application page making this call. In other words, the application works with any page from the same domain as the script page, but no other.

The script can also work within the same document, which makes it effective if you want to highlight all like elements in a page based on some event, e.g., all text-input form elements or thumbnail images.

In addition to getElementsByTagName, the document object has several methods that can create new objects. These are demonstrated in the later section "Modifying the Tree." First, though, we'll look at the Element object and the concept of elements in context.