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

Dumbing It Down - 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.

TABLE OF CONTENTS:
  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
Poor Best
Rating: starstarstarstarstar / 5
May 09, 2001

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
Just as you can create HTML tags as nodes, the DOM also allows you to create new text nodes on the tree with the aptly-named createTextNode() method. Here's an example:

<script language="JavaScript">
var insultObj = document.createTextNode("Could you *be* any dumber?");
</script>

Again, the appendChild() method comes into play to attach the new text node to the appropriate branch of the document tree.

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

Let's see how this plays out in a real-life example. I've put together a simple HTML page, which contains nothing except a set of <p> tags and some JavaScript code. The JavaScript will create a new text node and a new <img> tag and add them to the document tree as children of the <p> tag, using the code snippets I've just demonstrated.

<html>
<head>
</head>
<body>
<p id="heading1"></p>
<script language="JavaScript">
// set up the image
var imageObj = document.createElement("img");
imageObj.setAttribute("src", "logo.gif");
imageObj.setAttribute("width", "50");
imageObj.setAttribute("height", "50");
document.getElementById("heading1").appendChild(imageObj);
// set up the text node
var insultObj = document.createTextNode("Could you *be* any dumber");
document.getElementById("heading1").appendChild(insultObj);
// use this for testing
var pObj = document.getElementById("heading1");
// returns IMG
// alert (pObj.childNodes[0].nodeName);
// returns #text
// alert (pObj.childNodes[1].nodeName);
</script>
</body>
</html>

Although the page contains only a single <p> tag, running the script will add an <img> tag and a line of text to the document tree, which will be immediately visible in the browser.
Of course, the DOM comes with a bunch of other methods as well - here's a brief list, together with an explanation of their function.

removeNode() - remove a node (and/or all its children) from the document tree

replaceNode() - replace a node with another node

cloneNode() - duplicate an existing node

swapNode() - swap the positions of two nodes in the document tree

insertBefore() - insert a node at a specific point in the document tree

Most of these are self-explanatory, and they're not used all that often, so I don't plan to discuss them in detail - they're included here for the sake of completeness.

This article copyright Melonfire 2001. All rights reserved.


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

blog comments powered by Disqus
   

DHTML ARTICLES

- 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
Find More DHTML Articles


© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 10 - Follow our Sitemap

Dev Shed Tutorial Topics: