JSpot

Okay... I know the moment I post this, I'm going to get a million messages that an ID is supposed to be unique to the page, thus there should never be more than one. Thus, "Get ElementS By Id" is a misnomer. There is no such thing. You can only "Get ELEMENT By Id."

In a perfect world, you would be absolutely correct. But JavaScript is far from perfect, especially when you add in cross-browser dependencies.

I ended up with a control that generated HTML for me, which was very nice. Unfortunately (as I always tend to do) I wanted to fiddle with the output to make it just like I wanted it. Change a font here. An alignment there. Add some text to the top of each block. Set a margin. Put some padding on it so it doesn't blend into other text... you know. The usual stuff.

I could have solved most of this with CSS, but I needed to add some javascript (one line per block) to manage some of the data in it. *IF* I could get a handle to each DIV, I could assign a proper ID to it so that it would be unique, thus I could reference it later with a simpler JavaScript function.

But the code that was generated didn't give me any clean way of deciphering its DIVs from any other DIV in the form. The code that was generated looked similar to the following:

<DIV ID='Block'>
   <DIV ID=INNER>Do some nifty stuff in block 1.</DIV>
</DIV>

Now this isn't the extent of it, but you get the idea for the purposes of this demonstration. The important part here is that I don't have a name. All I have is an ID. And Javascript doesn't allow for document.getElementsById(...)

So I wrote my own.

function getElementsById(id)
{
   var divs = document.getElementsByTagName("div");
   var arr = new Array();
   
   for (var i=0; i < divs.length; i++)
   {
      if (divs[i].id == id)
      {
         arr[arr.length] = divs[i];
      }
   }

   return arr;
}

This gave me exactly what I was looking for, works well in both IE and FireFox (I haven't tried Opera or Safari. Sorry.) and I could then loop through the returned elements and assign a proper "ID" to it so that it would fit into the nice perfect world that we've all come to expect and love.

Labels: JavaScript