(idea) by prole Wed Nov 16 2005 at 20:18:08

Hello, and welcome to... The Future!

Here in the future, we call our Netscape browser Firefox, or Mozilla. In the future, we don't use eval() and document.write(), we use the Document Object Model (DOM). We never use document.all or document.layers, except to test what browser we're dealing with.*

DOM Level 2 introduced a suite of handy methods that allow developers to access single objects or lists of objects quickly and decisively. The two most common are getElementById() and getElementsByTagName(). These can be called on the document object itself, or any other object reference.

I have my object, now what?

There are all kinds of interesting interface features grouped under the heading of DHTML, but most involve

  • Showing or hiding an object
  • Changing the contents of an object
  • Changing a style property on an object
Here are a couple handy script snippets to perform these common tasks. They don't require browser detection - just enclose them in an if (document.getElementById) { } block to keep old browsers from choking.

Note: These examples assume that they're called with either

<SOMETAG onclick="myFunction(this)">

or

<SOMETAG onclick="myFunction(document.getElementById('OTHERELEM'))">

for performing actions on other objects.


Toggling an object's visibility

There are two CSS properties controlling visibility. One, display, effectively removes the object from the document. The other, visibility, just hides it. The caveat is that the latter doesn't change the space the object takes up. In the script below, substituting visibility for display should pose no problem.

function myFunction(obj) {
   if (obj.style.display == "none") {
      obj.style.display = "block";   // can also be "inline"
   } else {
      obj.style.display == "none";
   }
}

Mucking with object contents

This is especially handy for, let's say, an editable table where your user can add new rows for data on the fly. However, this is just a simple example. The really cool stuff is left as an exercise for the reader.

function myFunction(obj) {
   var contents = obj.innerHTML; // note we're ignoring Java's
                                 // capitalization conventions here
   if (contents.indexOf("edited") < 0) {
      obj.innerHTML = "edited";
   } else {
      obj.innerHTML = contents + ", edited again";
   }
}

If we wanted to be really slick, we'd create a new TextArea object or something, set its value property with our String, and attach it to the element represented by obj by calling the add() method on its childNodes collection. But we're not that slick.

Changing a style property

This is the same idea as in the display toggling script. The one thing that tends to trip people up is the syntax of style properties in Javascript. It's actually really easy to convert between them, though. They'll stay the same for one word property names and, for property names with dashes, replace the dashes with camel casing.

function myFunction(obj) {
   var otherField = document.getElementById("myOtherField");
   var isError = false;

   if (obj.value.length < 1) {
      isError = true;
   }
   if (isError) {
      otherField.style.color = "red";    // should actually use Hex
   }
}

Embrace the future! Refactor all those calls to eval() right out of existance and enjoy the power of the DOM!



More on the DOM: http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html

* ascorbic wants it noted that rather than check for browser, we should check for the availability of the method or property we want to use. In almost every case, this is true. But I still sometimes use document.all to test for IE when I need to make on the fly size adjustments, as IE has its own special way of calculating widths and heights. I actually have exactly one script where I do this, but it wouldn't function without a test for IE. Anyway, where possible, follow ascorbic's advice.

I like it!