Outer Court

Tech - MSIE5 - DOM

The DOM (Document Object Model) is a W3C standard. You can now access page elements a little more intuitive. If you name an element id=xy, then you can access it's content with

xy.data

If you want to access the first element (what might be a tag pair, or text) it nests, like the h1 from a body...

<body id=b>
<h1>

...you can write

b.firstChild or
b.childNodes[0]

Some uses

With [object].data (read-write) you can now really easy change text inside a page after loading. Like, you could dynamically make a paragraph lowercase. Or you could read out the values of an list and sum them up in the last entry.

Desktop-emulator

Expand/collapse-list

The expand/collapse-list samplesite shows how easy it is to setup a list with hidden hierarchies that show up on a click on the above level (like in Windows Explorer). This list isn't actually a list. Because first, there's a list inheritance bug (explained in more detail at WebReference). The second problem here was that if you click on a list entry, the parent entry which nested the current one would also have its onclick event triggered. So here I used several div's which don't encapsulate their content. The actual page shown when clicked is an absolutely positioned sub-part of the document which turns visible.

For the code behind this, see the JS-section on the expand-collapse list.

Continue with the tutorial: VML.

 
Basic
Goodies
Design
Tech
Email
Make a donation