First, I’ll give a quick background about my javascripting ability – I only just really learned to use js 6 or so months ago, so I am still very new – but I think I’ve picked up pretty quickly. I had attempted to learn it years ago with no luck – I just couldn’t find any real world use for what I was doing. That’s changed and javascript has come in handy almost every day for me. I tend not to use libraries, though I have experimented with them. I strictly hand code everything – xhtml, css, js. It’s more fun for me and it helps me get a better hold on all the languages.

I was reading over an article by Dustin Diaz titled Better ways to writing JavaScript and was surprised at the comments he received in regarding one of his tips – shortening the document.getElementById – and people jumped all over him. He had to defend himself, which I think was ridiculous – he knows what he is doing and was offering a different way to think about coding. Anyway, I felt for him.

So, because I’m new to the whole scene, I haven’t been corrupted that much and tried playing around with the idea of making a function to shorten the document.getElementById to something easier to read. I’m not as cool so I use something like the following so I can actually remember what it is doing:

function gId(idName) {
  return document.getElementById(idName);
}

So, in a function, instead of writing:

   var holder = document.getElementById('holderDiv');

I can just write:

  var holder = gId('holderDiv');

I think its really kind of slick.

ERROR – What if the Id doesn’t exist?

It’s suggested that when the document.getElementById is trying to access an element in html to do something to it, we should be checking that it exists in the first place. You can prevent an error in the js if you kick out of the function when it doesn’t exist.

So I threw this in:

function gId(idName) {
  if (!document.getElementById(idName)) return false;
  return document.getElementById(idName);
}

I mean hey that’s something I don’t have to write in multiple times now…
Why don’t you tell me that the js can’t find the id.

In fact why not return something that says what I messed up:

function gId(idName) {
  if (!document.getElementById(idName)) {
    alert('I cannot find the element with an id of' + idName + 'you Jackass.');
    return false;
  }
   return document.getElementById(idName);

This comes in really handy for me now and maybe as I get more experienced I’ll try it a different way.

Extending to document.getElementsByTagName

I could even extend it to document.getElementsByTagName by passing a variable to the function to distinguish between a tag or an element with an id. I could get all the list items:

  var theHolder = get('li', 'tag');

Or just get a element with an id:

  var theHolder = get('theCoolDiv', 'id');

And then send them through to this:

function get(name, type) {
  if (type == 'id') {
    if (!document.getElementById(name)) {
      alert('I cannot find the element with an id of' + name + 'you Jackass.');
      return false;
    }
    return document.getElementById(name);
  }
  else {
    if (!document.getElementsByTagName(name)) {
      alert('I cannot find any' + 'name' + 'tags you Jackass.');
      return false;
    }
    return document.getElementsByTagName(name);
    }
}

Anyway, it could probably be a lot cleaner or approached in a different manner, but at least I’m experimenting.