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

Incredible Demos

  • By
    Flashy FAQs Using MooTools Sliders

    I often qualify a great website by one that pay attention to detail and makes all of the "little things" seem as though much time was spent on them. Let's face it -- FAQs are as boring as they come. That is, until you...

  • By
    WebKit Marquee CSS:  Bringin’ Sexy Back

    We all joke about the days of Web yesteryear.  You remember them:  stupid animated GIFs (flames and "coming soon" images, most notably), lame counters, guestbooks, applets, etc.  Another "feature" we thought we had gotten rid of was the marquee.  The marquee was a rudimentary, javascript-like...

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!