Shorten document.getElementById

Feb 02, 2008

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.

Share the Love: | digg | magnolia


Marty Jun 27, 10:28 PM#

Keep in mind, that the .getElementById( id ) method in IE will return incorrect objects {elements that match by name, as well as different cases of the same ID}

Brad Jun 29, 12:01 AM#

That’s very true, but xHTML 1.0 strict does not allow the ‘name’ attribute and it is a best practice to not use the same ID more than once.

If you follow this, you shouldn’t have any problem.

Share Your Comment

You must preview your post and then hit submit.

If you haven't looked already check out my articles, my tutorials or my portfolio. If you need something else, please feel free to chat with me.

All content of this website (unless marked otherwise) is © copyright bradley j. cooper 2006-2008

Brad's AvatarI'm Brad Cooper a web designer/front-end programmer with a passion for actualizing visions. I try to create a piece of art in each site that I put together both visually and technically. I currently work outside Philadelphia and live in Marlton, New Jersey.

You can find me online:

Twitter | FriendFeed | Flickr | Delicious

Or keep up to date and:

Feed Icon Grab My Feed.

If you have a question or need some help, feel free to Chat with Me.

Recent Articles

» New Window Script Redux

» Magnolia - How social bookmarking should be - social!

» My Affinity for Color 2

» Pained by Invalid Code

Recent Tutorials

» Unobtrusive Expand and Collapse Navigation

» Forcing New Windows on Users Script

» Shorten document.getElementById

» Google Feed API Tutorial