Article
Rough Guide to the DOM
In The Frame
It's also interesting to see how the DOM works with frames. Consider the following example, which sets up two frames, "left.html" and "right.html".
<html>
<head>
</head>
<frameset cols="20%,*">
<frame name="left" src="left.html" scrolling="auto"
frameborder="no">
<frame name="right" src="right.html" scrolling="auto"
frameborder="no">
</frameset>
</html>
In order to illustrate how to navigate across frames, I'm going to write a simple script which changes the background colour of the right frame when the appropriate link is clicked in the left frame. Here's the right frame,
<html>
<head>
</head>
<body id="body">
</body>
</html>
and here's the left frame - note how each link calls the changeFrameBackground() function with a color as parameter.
<html>
<head>
</head>
<body>
<a href="javascript:changeFrameBackground('red')">Red</a>
<br>
<a href="javascript:changeFrameBackground('blue')">Blue</a>
<br>
<a href="javascript:changeFrameBackground('green')">Green</a>
<br>
<a href="javascript:changeFrameBackground('black')">Black</a>
</body>
</html>
Finally, let's take a look at the function which does all the work.
<script language="JavaScript">
var bodyObj = top.right.document.getElementById("body");
function changeFrameBackground(col)
{
bodyObj.setAttribute("bgcolor", col);
}
</script>
Since this is a frameset, it's necessary to prefix the document.getElementById() method call with a reference to the appropriate frame. This prefix is necessary to identify to the DOM which frame is being called, and to obtain a reference to the correct document tree.
Once a reference to the right frame's <body> tag is obtained, changing the frame's background colour is a simple setAttribute() away.
Branching Out
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>
Copyright Melonfire, 2000. All rights reserved.