Make alias to document.getElementById in Javascript

Question

How can I alias the function "document.getElementById" I've seen it done using $

Thanks

Answer 1

When you've seen the $() function, it was probably some library such as jQuery or Prototype. The $ function is not an alias for document.getElementById, but is a wrapper that extends the functionality of the function.

To create your own wrapper, you could write a function "alias":

var alias = document.getElemenyById;

or

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

But really, I would use one of the libraries available such as jQuery or Prototype.

Answer 2

Here's something I use in my own library. DOM is the class and $ is a function which is a shortcut implementation of the getElementById function:

function DOM()
{
  this.$ = function(elementIDs)
  {
    var el;

    // If an array of element names is passed.
    if (arguments.length > 1) 
    {
      var elements = [];
      var length = arguments.length;
      for (var i = 0; i < length; i++)
      {
        // Call this function recursively for each passed parameter.
        elements.push(this.$(arguments[i]));
      }
      return elements;
    }

    // If a single element name is passed.
    if (typeof(elementIDs) == "string")
    {
      el = document.getElementById(elementIDs);
    }
    return el;
  }
}

Usage:

var el = new DOM().$("elementID");

You can alias it to the top level window element.

Answer 3

function $( s ) {
    return document.getElementById( s ) ? document.getElementById( s ) : "";
}

$( "myId" );

This assumes you only want to use the dollar function (selector) to get an ID. I didn't test that, but it should work.

The last time I looked at the core of jQuery, it took a string as an argument and then used a regular expression to determine what kind of selector it was.

Answer 4

Possibly the easiest/shortest way:

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

Answer 5

facebook's connect-js does the following in src/core/prelude.js:

if (!window.FB) {
  FB = {
    // ...
    $: function(id) {
      return document.getElementById(id);
    }
    // ...
  }
}

Then, to use it, they do:

FB.$('name-of-id');

The initial block creates the global object FB. They use this object, FB, as a namespace and define all their objects, properties, and functions within it. That way, it will work with other JavaScript code as long as that other code doesn't use the global object FB.