Section 9.5. The all Collection, InnerOuter HTML and Text, and Old and New Documents


9.5. The all Collection, Inner/Outer HTML and Text, and Old and New Documents

The all collection on the document object contains references to all elements in the document page. It was a concept created by Microsoft as a way to collect all page elements into one array, before the W3C started work on standardizing the object hierarchy.

The document.all collection was one of the earlier methods that accessed individual elements; however, the actual collection itself is no longer supported in many modern browsers, such as Mozilla/Firefox. Still, the concept of being able to access any element in the document still remains; it's just the approach that has changed. Now, you can use document.getElementById, passing in the element's identifier to access the individual object.

In Chapter 10, you'll see how other methods get all elements of a certain tag or, given a specific name, via the document object.


You'll see examples of document.all in many older scripts, when it was used to differentiate object support in cross-browser DHTML applications. It's not uncommon to see code like the following:

if (document.all)      elem = document.all['elemid']; else     elem = document.getElementById['elemid'];

This actually works in most browsers. However, Internet Explorer is about the only browser that supports document.all now, so recognize it for what it was, but don't use it for modern applications. IE 6.x (5.x really) supports getElementById, just like other browsers.

Another interesting item you'll see in both older and newer dynamic JavaScript applications is the use of the following properties: innerText, outerText, innerHTML, and outerHTML.

These properties provided ways to change the content of the element, or both the content and the element. The inner- and outerText properties replace whatever is contained in the element, or the element itself, with text. The inner- and outerHTML properties replace the element's HTML or the element with HTML.

As noted in the last section, through the BOM, not all attributes of an element can be modified after the document is loaded. Using the inner/outer properties, this limitation could be worked around by actually replacing the contents of an element instead of changing its attributes. This approach achieved a high level of success in its day because it provided a way to actually modify the page contents after the page was loadednot just an attribute here or there. That was pretty heady stuff in its time.

Today, with the sophisticated DOM API, the only property still supported with the Mozilla line of browsers is innerHTML. In Example 9-14, the web page contains three DIV elements, each of which contains further markup. The first DIV contains a paragraph; the second, an unordered list; and the third, a hypertext link. When the page loads, these are accessed using the getElementsById document method, and their content is changed via innerHTML.

Example 9-14. Accessing named elements and changing their inner HTML

<!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" /> <title>Modifying Elements after Page loads</title> <script type="text/javascript"> //<![CDATA[ function changeDiv(  ) {    // get all elements idd 'elem1'    var elem1 = document.getElementById("elem1");    elem1.innerHTML = "<h1>Hello World</h1>";    var elem2  = document.getElementById("elem2");    elem2.innerHTML = "<ol><li>Option 1</li><li>Option 2</li></ol>";    var elem3 = document.getElementById("elem3");    elem3.innerHTML = "<img src='/books/4/327/1/html/2/dotty.gif' alt='dotty' />"; } //]]> </script> <body onload="changeDiv(  );"> <div > <p>Paragraph text.</p> </div> <div> <ul > <li>option 1</li> <li>option 2</li> </ul> </div> <div> <a href="ch09-12.htm" >Example 9-12</a> </div> </body> </html>

The innerHTML property is all of the HTML that's contained within the identified element. It's a read/write property, which means it can be accessed, modified, or completely replaced, as shown in Figure 9-3. What's fascinating, though, is that this isn't reflected in the document source. If you look at view source, the HTML elements reflect the web page before the dynamic modification.

Figure 9-3. Dynamically altered content with innerHTML


All the major browsers support innerHTML, though each may have its own minor quirks in implementation (which is why you need to test your effects before putting them into production). The W3C has deprecated its use, but most browsers support it a) because of its widespread use, and b) because it's so easy to use compared to the DOM methods that accomplish the same task.




Learning JavaScript
Learning JavaScript, 2nd Edition
ISBN: 0596521871
EAN: 2147483647
Year: 2006
Pages: 151

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net