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>
Dumbing It Down
Just as you can create 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.