Script Comparison - Falling Snow

document.write And The DOM

Perhaps one of the most significant changes between my original 2004 "Falling Snow" script and the new version is that the original used the now obsolete document.write statement to add the snowflakes into the page. Now document.write was very important in the early days of JavaScript because it provided one of the very few ways of actually updating the web page from the script (about the only other way thatr was originally supported was to update the values displayed in forms).

Now using document.write had several disadvantages. It could only be used before the page finished loading and either the statement itself or a function call that called the function containing it had to be embedded into the HTML at the spot in the page where the output of the document.write was to be written (that's whyt the original falling snow script had to call the startSnow() function from a script within the body of the page instead of using an onload event handler). It is not therefore possible to use document.write in an unobtrusive script.

JavaScript now has not just one but two much better ways to interact with the content of the web page and so there is now no circumstance where document.write is the appropriate way of interacting with the web page. The simplest way of getting rid of a document write statemen t is to simply replace the script emdedded in the page with a div that has an id and then in your unobtrusive script attached to the bottom of the body you simpy assign the value that was in the document.write to the innerHTML of the div (using document.getElementById to reference the div in order to assign the innerHTML).

An even less obtrusive way for JavaScript to interact with the web page (because it doesn't necessarily needyou to add anything into the HTML) is to use the appropriate Document Object Model Commands. This is the approach I decided to take with the new version of my falling snow script and a direct comparison of the document.write statement from the original script with the DOM commands in the new script shows just how easy it is to pull the pieces out of the HTML contained in the document.write and to define the same code using the DOM calls instead.

Here's the document.write statement from the original script (it actually needs to be all on one line but it is wrapped onto several lines here to make it easier to read without having to scroll left and right).

document.write('<div id="snow' + i + '" style="position: absolute; z-index: ' + i + '; visibility:hidden; "><img src="' + snowflakes[Math.floor(Math.random() * snowflakes.length)] + '" border="0"></div>');

The corresponding DOM calls in the new script are below with the first five lines creating the div tag and the next three creating the img tag.The second last line inserts the img tag inside the div tag, and the last line adds the two tags into the bottom of the body of the page (which is where the function containing the document.write is called from in the original script).

newdiv = document.createElement("div");
newdiv.id = 'snow' + i;
newdiv.style.position = 'absolute';
newdiv.style.zIndex = i;
newdiv.style.visibility = 'hidden';
newimg = document.createElement("img");
newimg.src = snowflakes[Math.floor(Math.random() * snowflakes.length)];
newimg.style.border = 0;
newdiv.appendChild(newimg);
document.getElementsByTagName('body')[0].appendChild(newdiv);

Perhaps the most noticeable thing in the DOM version of the code is that there is no actual HTML code embedded in the JavaScript. That's because using this method does not directly update the HTML of the page. Instead we are updating the Document Object Model which in turn updates the HTML of the page. Since all of the ways that JavaScript provide for retrieving information from the web page actually retrieve it from the Document Object Model (which is built from the HTML when the page first loads but which does not reflect any changes made directly to the HTML via document.write or innerHTML), this is the only way of adding content into the web page where you want to be able to interact with the individual tags that have been added in later JavaScript. It also does away with the need to have an empty tag in the HTML into which the tags are to be added as is necessary if you use innerHTML.

While in this particular script we are adding the new content (the snowflakes) to the very end of the HTML, you can use DOM commands to insert (or replace or delete) content after or within any tag in the web page simply by using an appropriate call (or series of calls) that locates it within the document object model.

Next: setTimeout and setInterval.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate