I recently tried to write shortcuts for build-in object functions in JavaScript.

Here it is:

function changeit(){
    var ge = getElementsByTagName() , doc = document;
    doc.ge('div')[0].innerHTML = 'Changed';
}

I thoughy it would actually work but it didn't. Is there a way to make it work? I mean calling a built-in object function by a var name, and will it work in all browsers?

I recently tried to write shortcuts for build-in object functions in JavaScript.

Here it is:

function changeit(){
    var ge = getElementsByTagName() , doc = document;
    doc.ge('div')[0].innerHTML = 'Changed';
}

I thoughy it would actually work but it didn't. Is there a way to make it work? I mean calling a built-in object function by a var name, and will it work in all browsers?

• javascript

5 Answers 5

This:

var ge = getElementsByTagName()

calls the function, or attempts to. There's no global function with that name, so it won't work. Similarly,

doc.ge('div')

attempts to find a "ge" property of "doc", which also doesn't exist; you just declared "ge" a local variable, not a property of "doc".

If you want a shorter name, just do something like this:

function ge(tagName) { return document.getElementsByTagName(tagName); }

Then you can write

ge('div')[0].innerHTML = 'Changed';

The function getElementsByTagName does not exist barely. You have to access it as a property of document, but even then, you have to save the reference to document as well:

var ge = document.getElementsByTagName.bind(document);

Or, you could save the name as a string:

var ge = 'getElementsByTagName';

Then you can do:

document[ge]('div')...

Because obj['foo'] is equal to obj.foo.

Try this:

function changeit()
{
    var ge = document.getElementsByTagName('div');
    ge[0].innerHTML = ge[0].innerHTML + ' Changed';
}

Test here: http://jsfiddle/aZAkz/1/

for the syntax of document.getElementsByTagName you can check here: https://developer.mozilla/en/DOM/document.getElementsByTagName

What you do in your code is, you create a variable called ge, which gets the result of getElementsByTagname(). since you are selecting attributes from the window object by default, you're actually trying to assignwindow.getElementByTagName() to the variable, but the window object doesn't have such an attribute. So you replace that.

Now the second problem, you're assigning the returned value after calling the method instead of the method object itself. so ge = document.getElementsByTagName() should bee ge = getElementsByTagName

Then, you create another object, called doc, which is actually the document. But, the document doesn't have an attribute called ge, you've never made ge an attribute of the document object. Here's how I would rewrite your code:

function changeIt(){
    var doc = document;
    //this line works, because doc doesn't get a copy of the document object but a reference to it
    //so changing document changes doc.
    document.ge = document.getElementsByTagName;
    doc.ge('div')[0].innerHTML = 'Changed';
}

You can set up a variable that holds a pointer to any object property:

var gEBTN = document.getElementsByTagName;
var gEBI = document.getElementById;

When you need to use it, you need to only type gETBN('div')..., or gEBI('elementId').... In your case:

function changeIt() {
    var ge = document.getElementsByTagName;

    ge('div')[0].innerHTML = 'Changed';
}

Several hooks can be made to avoid type long mands, object chains, and you can change its values aswell (type the excerpts below on a JS Console to see the results):

CHANGING ON THE SAME SCOPE

var originalObject = {
  deepProperty: {
    deepDeepProperty: {
      someNumber: 0,
      anotherNumber: 0,
      someString: 'String',
      anotherString: 'String',
      someArray: ['a', 'b'],
      anotherArray: ['a', 'b']
    }
  }
};
var hookA = originalObject.deepProperty;
var hookB = originalObject.deepProperty.deepDeepProperty;

hookA.siblingProperty = hookA;

hookB.someNumber = 1;
hookB.anotherNumber++;

hookB.someString = 'Strong';
hookB.anotherString.replace(/i/, 'o');

hookB.someArray = ['b', 'c'];
hookB.anotherArray.shift();
hookB.anotherArray.push('c');

console.log(originalObject);
console.log(hookA);
console.log(hookB);

console.log(hookA === originalObject.deepProperty);
console.log(hookB === originalObject.deepProperty.deepDeepProperty);

CHANGING INSIDE ONE FUNCTION

var originalObject = {
  deepProperty: {
    deepDeepProperty: {
      someNumber: 0,
      anotherNumber: 0,
      someString: 'String',
      anotherString: 'String',
      someArray: ['a', 'b'],
      anotherArray: ['a', 'b']
    }
  }
};

function changeOriginalObject(obj) {
  var hookA = obj.deepProperty;
  var hookB = obj.deepProperty.deepDeepProperty;

  hookA.siblingProperty = hookA;

  hookB.someNumber = 1;
  hookB.anotherNumber++;

  hookB.someString = 'Strong';
  hookB.anotherString.replace(/i/, 'o');

  hookB.someArray = [
    'b',
    'c'
  ];
  hookB.anotherArray.shift();
  hookB.anotherArray.push('c');
}

console.log(originalObject);

changeOriginalObject(originalObject);

console.log(originalObject);