Create Your Own Custom JavaScript Dollar Function To Select An Element

By  on  

The "dollar" function has become famous in recent years due to its inception in many popular JavaScript frameworks. MooTools, for example, uses the dollar function to select a single element from the DOM. This functionality is extremely helpful as it allows you to keep your code extremely short and readable, not to mention document.getElementById(''); can get annoying quickly.

The Code

function $(id)
{
	return document.getElementById(id);
}

You don't need to use a JavaScript framework to compact your code. If you frequently select unique DOM elements, you should create a dollar function for the sake of yourself and your users.

Recent Features

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    CSS Fixed Position Background Image

    Backgrounds have become an integral part of creating a web 2.0-esque website since gradients have become all the rage. If you think gradient backgrounds are too cliche, maybe a fixed position background would work for you? It does provide a neat inherent effect by...

  • By
    MooTools 1.2 Image Protector: dwProtector

    Image protection is a hot topic on the net these days, and why shouldn't it be? If you spent two hours designing an awesome graphic, would you want it ripped of in matter of seconds? Hell no! That's why I've created an image...

Discussion

  1. To cut the number of getElementById() calls in half, you could just do:

    function $(id) {
         return document.getElementById(id);
    }
    
  2. Hi, lets make it smaller ^^

    function $(i) { return document.getElementById(i); }
  3. Can you just do:

    var $ = document.getElementById;
    

    ? I didn’t test this.

  4. Paul

    This function returns null and does not work when I do $('x').style.background='orange';

  5. Brandon
    function $(e)
    {
     if(e.substring(0,1) == '#')
     {
      return document.getElementById(e.substring(1));
     }
     else
     {
      return document.getElementByClass(e.substring(1));
     }
    }
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!