Article
Rough Guide to the DOM
Dumbing It Down
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 treereplaceNode()- replace a node with another nodecloneNode()- duplicate an existing nodeswapNode()- swap the positions of two nodes in the document treeinsertBefore()- 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.
Conclusions
Should you be interested in learning more about the DOM, there are a number of resources available to you online. Here's a brief list:
The official W3C DOM specifications, at http://www.w3.org/DOM/
Mozilla.org developer resources, at http://www.mozilla.org/docs/ and
http://www.mozilla.org/docs/web-developer/
DOM sample code at http://www.mozilla.org/docs/dom/samples/
An interesting article on transitioning from proprietary DOMs to the W3C standard, at http://sites.netscape.net/ekrockhome/standards.html
A structural (logical) view of the DOM, at http://www.xml.com/1999/07/dom/xml_dom.gif
An XML introduction to the DOM, at http://www.xml101.com/dom/
And, before I go, a final comment. While the new DOM may appear to be far less flexible and easy to use than the proprietary models developers have been used to, the fact remains that it offers one very important advantage: standardization. This DOM has been written in such a manner that every element on a page is finally available to the developer via standard navigation rules, and can be manipulated using standard object methods and properties.
In the short run, it may be difficult - even frustrating - to re-code Web pages as per the new DOM; however, I believe that the effort is well worth putting in, as it immediately ensures that your pages will be viewable across all standards-compliant browsers. It should be noted that much of the confusion in the past (and the resulting profusion of proprietary DOM interfaces) was due to the lack of clear direction from the W3C; now that a DOM specification has been finalized and released, future versions of all the major browsers should support it completely, and we should hopefully see an end to browser incompatibilities that have plagued developers in the past.
Here's hoping!
Note: All examples in this article have been tested on Mozilla (build 18). Examples are illustrative only, and are not meant for a production environment. YMMV!
Copyright Melonfire, 2000. All rights reserved.