Home arrow DHTML arrow Page 6 - Rough Guide To The DOM (part 2)

Branching Out - DHTML

Now that you know the theory behind the new DOM, it's time totake off the gloves and get your hands dirty. In this article, find out howthe new rules apply to old favourites like image swaps, form validation andframe navigation, and then learn how to use ordinary JavaScript to add andremove elements from the document tree on the fly.

  1. Rough Guide To The DOM (part 2)
  2. Making The Swap()
  3. Turning The Tables
  4. Well-Formed
  5. In The Frame
  6. Branching Out
  7. Dumbing It Down
  8. Conclusions
By: Vikram Vaswani, (c) Melonfire
Rating: starstarstarstarstar / 5
May 09, 2001

print this article


The DOM also comes with a bunch of built-in methods designed to manipulate the DOM tree, adding and removing nodes from it on the fly. As you've already seen, a node on the DOM tree could be either an HTML tag or a text fragment - and the DOM comes with methods to add both these types of nodes to the tree, through program code.

I'll begin with the createElement() method, which is used to create a new HTML tag. The following code snippet creates an <img> tag as a node, and assigns it the name "imageObj".

<script language="JavaScript"> var imageObj = document.createElement("img"); </script>

Once the node has been created, attributes can be assigned to it using the setAttribute() method. For example, the code snippet

<script language="JavaScript"> imageObj.setAttribute("src", "logo_n.gif"); imageObj.setAttribute("width", "50"); imageObj.setAttribute("height", "50"); </script>

is equivalent to the tag

<img src="logo_n.gif" width="50" height="50">

Once the node has been created, the next order of business is to add it to the document tree - a task accomplished by the appendChild() method. The appendChild() method is used to append the newly-created node to a specific location in the tree.

The following code snippet would attach the "imageObj" node as a child of the element identified by "heading1".

<script language="JavaScript"> document.getElementById("heading1").appendChild(imageObj); </script>

This article copyright Melonfire 2001. All rights reserved.

>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates


Dev Shed Tutorial Topics: