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.
Demo Source Description Color Fades Source Produces a fade in effect using text. It dynamically changes CSS positioning and text color. Text Interlace Source Animates two strings of text producing an "interlace" effect. Fade Spacing Source Produces a fade in / fade out effect using text. It dynamically changes CSS positioning, text color and font spacing. Bouncing Smile Source Creates text elements dynamically and animates them. Gecko Wave Source Based on Bouncing Smile demo but produces a wave effect. Round Title Source Creates text elements dynamically and animates them. Scrolling Credits Source Dynamically 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.
Demo Source Description 3D Text Source Given a text string, this sample produces a 3D perspective illusion effect by dynamically creating multiple text objects and clipping each one. Can Source Produces 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. TextureWalls Source Based 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.
Demo Source Description Resize Source Allows user to drag the image and resize. Drag the little gray icon to resize. Dynamic Table Light Source A small table is created. Then the user is able to create rows, columns, select cells and edit content.
REFERENCES
SELECTED ARTICLES:
- DOM Level 1: Traversing an HTML Table with JavaScript and DOM Interfaces
STANDARD DOCUMENTATION AND DIRECTORIES
- Standard Documentation - W3C Document Object Model Level 1 - Specification
- JavaScript.W3C_DOM Category at dmoz.org
SAMPLE CODE AND DEMONSTRATIONS
- 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
- DMOZ.org, DOM demos directory Directory with DOM demonstrations at DMOZ.ORG
- Style Sample Codes - Using DOM to access and manipulate styles - DMOZ.ORG
RELATED TECHNOLOGIES AND DOCUMENTATION
- Standard Documentation - W3C Document Object Model Level 2 - Draft Specification
- XML 1.0 Specification
- Cascading Style Sheets, level 1 - Specification
SUPPORT
mozilla.org does not provide technical support services to browser users or web content developers. mozilla.org 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 http://www.w3.org/, http://www.ecma.ch/, and http://developer.netscape.com/. 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.public.dev.html | Netscape DevEdge HTML 4.0 newsgroup |
| comp.text.xml | Usenet XML newsgroup |
| netscape.public.dev.xml | Netscape DevEdge XML newsgroup |
| comp.infosystems.www.authoring.stylesheets | Usenet CSS newsgroup |
| netscape.public.dev.css | Netscape DevEdge CSS newsgroup |
| netscape.public.dev.dom | 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.
FEEDBACK
Do you have comments or suggestions about this sample code area, please use the following link:
send an e-mail about the article