CSS Codes
CSS Layouts
View RSS Feed

keyboard

document.getElementById shortcut

Rating: 9 votes, 3.89 average.
4 Comments
by
keyboard
, 03-22-2012 at 08:38 AM (43867 Views)
I'm amazed at how many people don't use a very simple shortcut for document.getElementById. This is for all the people who don't use a javascript library like jQuery.

All you have to do is include this code somewhere on your page

Code:
function $(element) {
return document.getElementById(element);
}
Then when you want to use document.getElementById('id'); just type $('id'); instead.

Example

Code:
<html>
<head>
<script type="text/javascript">
function $(element) {
return document.getElementById(element);
}
</script>
</head>
<body>
<input type="text" value="Hello" id="field1">
<input type="button" onclick="alert($('field1').value)">
</body>
</html>
I think it's a real time saver and more people should use it.

Submit "document.getElementById shortcut" to del.icio.us Submit "document.getElementById shortcut" to StumbleUpon Submit "document.getElementById shortcut" to Google Submit "document.getElementById shortcut" to Digg

Tags: None Add / Edit Tags
Categories
JavaScript & Ajax

Comments

  1. jscheuer1's Avatar
    It's unwise to pollute your code with a global variable which is so commonly used by other libraries. It makes all your code potentially (probably) incompatible with them. If I'm writing in ordinary javascript, I use a clip collection. One double click and I get:

    document.getElementById('');

    with the cursor insertion point between the two ' marks, all the time savings I need.
  2. keyboard's Avatar
    This is for all the people who don't use a javascript library like jQuery.
    I specifically stated that it wasn't for people who use javascript libraries. Though I guess you do have a point. Mabye a symbol that is less used like the underscore (_) would be a better choice.
  3. jscheuer1's Avatar
    Quote Originally Posted by keyboard1333
    I specifically stated that it wasn't for people who use javascript libraries. Though I guess you do have a point. Mabye a symbol that is less used like the underscore (_) would be a better choice.
    And who never will use any script libraries that use the $ variable. It's good to plan ahead.

    Underscore might be a better choice, but eventually would run afoul of someone else who had a similar yet different idea for the underscore if your code were combined with theirs.

    The general rule with global variables is to keep them long and descriptive so as to avoid conflicts with other scripts and to make the code human readable.

    Shorter but still descriptive variables can be used within the local scope of a function.

    In the long run, any extra typing this involves will by far be made up for by the ease of reading and understanding of the code (years later or for someone looking at it for the first time), and its ability to 'play nice' with other code.

    Incidentally, jQuery can coexist with a script or script library that uses $ like you do or for any other purpose via its noConflict() mode, but that adds a layer of complexity. And as far as I know, none of the other $ hogging libraries can do that.
  4. mburt's Avatar
    Or to avoid these issues:

    Code:
    var i = { d: function(x) { return document.getElementById(x); } }
//i.d("whatever");