Short Variable For Dom Methods

Can a 'shortcut' not be made to methods such as document.createElement, document.createTextNode, [element].setSelectionRange etc? var c = document.createElement; var div = c('div')

Solution 1:

In JavaScript, calling document.createElement calls the .createElement method with this = document. When you assign it to a variable, it loses this association.

You have to write a short function to call the method properly. For example:

var c = function(name){ returndocument.createElement(name); };

In newer versions of ECMAScript used by some browsers, you have the easier option of

var c = document.createElement.bind(document);

Unfortunately this is not universally supported.

Solution 2:

There are two obvious issues:

• Calling your aliased functions will not be providing the correct this value (it will be the global object rather than document), which the DOM method may or may not depend upon;
• DOM nodes in JavaScript are host objects, which are not subject to the normal rules of native JavaScript objects and can essentially do what they like. For example, there is no guarantee that a method of a host object is a regular Function object and may not therefore have the call() or apply() methods that you could otherwise use to provide the correct this value.

This being the case, you're better off writing a wrapper function instead, such as

functionc(tagName) {
    returndocument.createElement(tagName);
}