SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : DHTMLLib 2.0 : Collections

The first step to writing cross-browser scripts is to understand the differences between the browsers. As a starting point, the table below outlines each browser's support for accessing elements on the page. The following properties are exposed on the document object:
  IE3IE4NS3NS4
allEvery element in the document x  
anchorsAll anchors on the page (eg., <A NAME="...">)xxxx
appletsAll applets on the pagexxxx
bodyReturns a reference to the BODY element (outer FRAMESET element in Frameset documents). x  
formsReturns forms on the pagexxxx
framesReturns the IFrames on the pagexx  
imagesReturns the images on the page xxx
layersReturns absolutely or relatively positioned elements and layer/ ilayer elements   x
linksReturns the links on the page (eg., <A HREF="..."> and <AREA HREF="...">)xxxx
scriptsReturns the script blocks on the page x  

In addition to the above properties, some individual elements also provide access to elements. For example, each form in the form's collection exposes the collection of input, select, and textarea elements associated with the form. The select element further exposes an options collection representing each list box choice. These collections are all supported by the 3.x browsers and later.

Internet Explorer 4.0 extends the above collections by also exposing an all and children collection on every element. This allows you to find the elements contained by any other element. For example, you can examine a <P>aragraph element and then use the children collection to determine that there is a <B> and <EM> element contained within it. The difference between children and all are whether only immediate descendents are in the collections or whether every descendent is contained within the collection. For example: 

  <DIV>
    <H1>Introduction</H1>
    <P>Welcome to our 
      <EM>Introduction to Cross-browser Scripting</EM>
    </P>
  </DIV>

The DIV element's children collection contains the H1 and P element while the DIV element's all collection contains the H1, P, and EM element. In addition to the children and all collection, Internet Explorer also exposes additional collections for easy access to the document's styleSheets and an areas collection on map elements.

Netscape Navigator 4.0 does not expose additional collections but does have special handling for their layers collection. The layers collection is somewhat similar to the Internet Explorer's children collection but is limited only to element's that are positioned. The layers collection only contains layers immediately contained by the document. If a positioned element is nested within another positioned element, the nested element is not exposed through the document, but is instead exposed as collections on the containing layer's document. For example: 

<BODY>
  <DIV ID="div1" STYLE="position: absolute">
    <DIV ID="nestedDiv1" STYLE="position: absolute">
      Test
    </DIV>
  </DIV>
  <DIV ID="noPosition">
    <DIV ID="div2" STYLE="position: relative">
      Test
    </DIV>
  </DIV>
</BODY>

In the above example, the document's layers collection contains a reference to div1 and div2. The DIV, "noPosition" is not in any collection because it is not positioned. The DIV, "nestedDiv1", is not in the document's layers collection because it is contained by the positioned DIV, div1.

Each layer in Netscape is actually a pseudo-document. This means that each individual layer object exposes a document object with its own set of collections. Therefore, access the nestedDiv1 you need to first get a reference to div1 from the document's layers collection, then access div1's document object, then access the psuedo-document's layers collection, and finally you can reference nestedDiv1: 

  // referenced nestedDiv1:
  document.layers.div1.document.layers.nestedDiv1

To compare to Internet Explorer, you can reference the nestedDiv either directly or indirectly similar to Netscape. The difference is in Internet Explorer no psuedo-document is ever created: 

  document.all.nestedDiv1
  // or similar to Netscape through div1
  document.all.div1.all.nestedDiv1

The psuedo-document in Netscape has a very significant effect on the way Netscape treats documents. Whenever a positioned element is created, the positioned element is treated by Netscape to be a separate document. Unfortunately, this can cause a lot of problems, especially when creating cross-browser documents and even documents that you want to degrade gracefully. The problem is most apparent when forms are introduced: 

<FORM NAME="myForm">
  <DIV ID="div1" STYLE="position: absolute; top: 100">
    <INPUT TYPE="text">
  </DIV>
  <DIV ID="div1" STYLE="position: absolute; top: 140">
    <INPUT TYPE="text">
  </DIV>
</FORM>

When CSS-Positioning specification was created, one of the top features was the ability to now create real 2-D forms like traditional form packages. Unfortunately the above does not work in Netscape. Worse, the input controls are not even displayed. The reason is that each positioned DIV is considered a separate document. As a separate document, imagine you took the contents of the positioned element and pasted it into its own page. Now the input elements are no longer contained within a form. Netscape cannot display input elements outside of a form, hence nothing is displayed.

The problem in Netscape is that they morph the behavior of the document in response to a stylistic attribute. This violates the fundamentals of CSS where all CSS is supposed to do is add style. To better understand why this is the case, imagine you viewed the above page in an older browser without CSS-P support. The above form would display correctly with 2 input elements. However, rather than be positioned they will be in flow. This is a good thing as it allows you to create smart pages that degrade gracefully. Internet Explorer supports the separation of style and content and has no difficulty with positioned elements.

Unfortunately what this means is that even with DHTMLLib or any other cross-browser library you are still constrained by the functionality and limitations of the particular browser. If you must solve the form positioning problem, you can read about a custom work-around (not using DHTMLLib) we created.

Next we discuss differences in property handling and dynamic page layout. Internet Explorer exposes every attribute on every element as a property and most properties are read-write. Netscape Navigator exposes a small set of attributes and most of them are read-only.

[Programming Element Attributes]

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.