You are currently viewing a snapshot of taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to, please file a bug.

DOM Sample Code

These samples demonstrate the use of DOM and CSS positioning using JavaScript. The demos are separated into groups:

  • *NEW* A TreeWalker demo is up, showing off the power of this W3C specification and its implementation.
  • Font family: Using DOM Level 1 to access and control HTML elements. Features use of fonts, animation and CSS via JavaScript.
    Color FadesSourceProduces a fade in effect using text. It dynamically changes CSS positioning and text color.
    Text InterlaceSourceAnimates two strings of text producing an "interlace" effect.
    Fade SpacingSourceProduces a fade in / fade out effect using text. It dynamically changes CSS positioning, text color and font spacing.
    Bouncing SmileSourceCreates text elements dynamically and animates them.
    Gecko WaveSourceBased on Bouncing Smile demo but produces a wave effect.
    Round TitleSourceCreates text elements dynamically and animates them.
    Scrolling CreditsSourceDynamically creates a set of text elements like a credits list. Animates the area, changing text position and text color.

  • Exotic family: Using DOM Level 1 dynamically create HTML elements. These samples also demonstrates the use of CSS positioning and clipping.
    3D TextSourceGiven a text string, this sample produces a 3D perspective illusion effect by dynamically creating multiple text objects and clipping each one.
    CanSourceProduces a 3D illusion effect by dynamically creating multiple images and clipping each one. Try changing the URL image to image2.jpg or to other image URL on the web.
    TextureWallsSourceBased on the Can demo. Intended to illustrate a texture effect.

  • DOM 1/2 family: Using DOM Level 1 to create dynamically HTML elements and DOM 2 Event Model to provide user interface control.
    ResizeSourceAllows user to drag the image and resize. Drag the little gray icon to resize.
    Dynamic Table LightSourceA small table is created. Then the user is able to create rows, columns, select cells and edit content.



- DOM Level 1: Traversing an HTML Table with JavaScript and DOM Interfaces


- Standard Documentation - W3C Document Object Model Level 1 - Specification
- JavaScript.W3C_DOM Category at


- Scrolling Banner - demonstrates a scrolling banner implementation - uses DOM1 and DOM2
- Taboca Demonstrations for Gecko - collection of DOM demos
- Toshirou Takahashi's DOM Sample Code - Numerous samples showing how to use DOM features
-, DOM demos directory Directory with DOM demonstrations at DMOZ.ORG
- Style Sample Codes - Using DOM to access and manipulate styles - DMOZ.ORG


- Standard Documentation - W3C Document Object Model Level 2 - Draft Specification
- XML 1.0 Specification
- Cascading Style Sheets, level 1 - Specification

SUPPORT does not provide technical support services to browser users or web content developers. does have newsgroups, but they are intended for discussions about the design and development of the Mozilla browser and its future features, not for user or web developer support "how to" questions.

Much information on these standards and technologies can be found at,, and If after consulting those resources you have questions about developing content and applications using the technologies mentioned in this TechNote, here is a list of newsgroups on these topics:

Newsgroup Topic of Newsgroup
comp.infosystems.www.authoring.html Usenet HTML newsgroup Netscape DevEdge HTML 4.0 newsgroup
comp.text.xml Usenet XML newsgroup Netscape DevEdge XML newsgroup
comp.infosystems.www.authoring.stylesheets Usenet CSS newsgroup Netscape DevEdge CSS newsgroup Netscape DevEdge DOM newsgroup
comp.lang.javascript Usenet JavaScript newsgroup
netscape.devs-javascript Netscape DevEdge JavaScript newsgroup

If you would like user or developer support for a particular vendor's product, please contact that vendor for details. If you would like technical support or other assistance from Netscape regarding the features or technologies of shipping (post-release, not beta) Netscape products, please visit the Netscape DevEdge Online Support Area.


Do you have comments or suggestions about this sample code area, please use the following link:

send an e-mail about the article