using abbreviated references for javascript objects

Question

using abbreviated references for javascript objects

I have extremely valuable information, so I attempted to create shortcuts like the following:

Check out this LIVE example: http://jsfiddle.net/nqeUN/

var d = "document" ,
    t = "getElementByTagName" ,
    d = "div" ,
    oc = "onclick";
d[t](d)[0].oc = function(){
    alert("1");
}

Unfortunately, it's not functioning as expected. What could be the reason? I noticed that in the Google Plus API, all objects are defined as strings like this. How do they manage to make it work?

javascript

Answer 1

Answer №1

You must tackle a few issues that require attention

There are currently two values assigned to d: "document" and "div".
It should be getElementsByTagName
The getElementsByTagName function requires a DOM entry point, not a string. Change the first d to document
When using dot notation for .oc, it will bind to the property oc instead of the value of the variable oc. Use brackets [] notation instead

Code:

var d = document ,
    t = "getElementsByTagName" ,
    div = "div" ,
    oc = "onclick";

d[t](div)[0][oc] = function(){
    alert("1");
}

Here is a working Fiddle: http://jsfiddle.net/nqeUN/1/

Answer 2

You must tackle a few issues that require attention

There are currently two values assigned to d: "document" and "div".
It should be getElementsByTagName
The getElementsByTagName function requires a DOM entry point, not a string. Change the first d to document
When using dot notation for .oc, it will bind to the property oc instead of the value of the variable oc. Use brackets [] notation instead

Code:

var d = document ,
    t = "getElementsByTagName" ,
    div = "div" ,
    oc = "onclick";

d[t](div)[0][oc] = function(){
    alert("1");
}

Here is a working Fiddle: http://jsfiddle.net/nqeUN/1/

Answer 3

Answer №2

Using strings for properties is possible, but not for variable names. Additionally, you mistakenly declare the variable d twice and use an incorrect method name. A better approach would be as follows:

var d = 'document', t = 'getElementsByTagName', div = 'div', oc = 'onclick';

window[d][t](div)[0][oc] = function() { ... }

However, this can reduce readability and complexity unnecessarily. It may be more efficient to utilize a code minimizer to automatically optimize your code while still keeping it readable during development.

Answer 4

Using strings for properties is possible, but not for variable names. Additionally, you mistakenly declare the variable d twice and use an incorrect method name. A better approach would be as follows:

var d = 'document', t = 'getElementsByTagName', div = 'div', oc = 'onclick';

window[d][t](div)[0][oc] = function() { ... }

However, this can reduce readability and complexity unnecessarily. It may be more efficient to utilize a code minimizer to automatically optimize your code while still keeping it readable during development.

Answer 5

Answer №3

d is actually just a string, not the document object.

To access the actual document object, you should use var d = document.

However, it's not recommended to do this manually as it can result in extremely unreadable code.

Instead, focus on writing clear and understandable Javascript code first, then utilize a minifier tool like Microsoft AjaxMin or Google Closure Compiler to automatically reduce the size of your code for production purposes.

Answer 6

d is actually just a string, not the document object.

To access the actual document object, you should use var d = document.

However, it's not recommended to do this manually as it can result in extremely unreadable code.

Instead, focus on writing clear and understandable Javascript code first, then utilize a minifier tool like Microsoft AjaxMin or Google Closure Compiler to automatically reduce the size of your code for production purposes.

Answer 7

Answer №4

After updating the values in your specific situation, you will observe:

"document".getElementsByTagName("document").onclick = function() {};

1.) Ensure that variable d is assigned the actual global document reference, not just the string 'document'

var d = window.document;

2.) The method getElementsByTagName retrieves nodes matching the specified tag name within the DOM node provided; therefore, passing 'document' as a string would search for HTML elements named 'document'. Instead, search for div elements like this:

d.getElementsByTagName("div"); // Retrieves all 'div' elements in the document

3.) When utilizing method names as strings, remember to enclose them in brackets

document[ t ]; // Avoid using document.t as it won't work since t is not a member

4.) Once you have selected the desired nodes, iterate through them to attach event handlers to each element

var d = document.getElementsByTagName("div"),
    i = 0,
    len = d.length;

for ( ; i < len; i++ ) {
    (function() {
        // Perform actions with d[i], the current element in the loop
    })(i)
}

I trust this explanation proves beneficial! Best wishes.

Answer 8

After updating the values in your specific situation, you will observe:

"document".getElementsByTagName("document").onclick = function() {};

1.) Ensure that variable d is assigned the actual global document reference, not just the string 'document'

var d = window.document;

2.) The method getElementsByTagName retrieves nodes matching the specified tag name within the DOM node provided; therefore, passing 'document' as a string would search for HTML elements named 'document'. Instead, search for div elements like this:

d.getElementsByTagName("div"); // Retrieves all 'div' elements in the document

3.) When utilizing method names as strings, remember to enclose them in brackets

document[ t ]; // Avoid using document.t as it won't work since t is not a member

4.) Once you have selected the desired nodes, iterate through them to attach event handlers to each element

var d = document.getElementsByTagName("div"),
    i = 0,
    len = d.length;

for ( ; i < len; i++ ) {
    (function() {
        // Perform actions with d[i], the current element in the loop
    })(i)
}

I trust this explanation proves beneficial! Best wishes.

Answer 9

Answer №5

The issue arises because the variable d is set as a string, and the String object does not support the getElementByTagName method.

Additionally, there is a redeclaration of the d variable as the string div, so it should be assigned a different name:

var d = "document",
    t = "getElementByTagName",
    e = "div",
    oc = "onclick";

To resolve this, you have to access the window object first and then get the document attribute from it:

window[d]

This will allow you to retrieve the Document element and then access the getElementsByTagName method (note the plural form):

window[d][t]

Next step is to call this method, provide the element name, grab the first value from the array that is returned, and assign a function to the onclick attribute:

window[d][t](e)[0][oc] = function () {
    alert("1");
};

Answer 10

The issue arises because the variable d is set as a string, and the String object does not support the getElementByTagName method.

Additionally, there is a redeclaration of the d variable as the string div, so it should be assigned a different name:

var d = "document",
    t = "getElementByTagName",
    e = "div",
    oc = "onclick";

To resolve this, you have to access the window object first and then get the document attribute from it:

window[d]

This will allow you to retrieve the Document element and then access the getElementsByTagName method (note the plural form):

window[d][t]

Next step is to call this method, provide the element name, grab the first value from the array that is returned, and assign a function to the onclick attribute:

window[d][t](e)[0][oc] = function () {
    alert("1");
};

Answer 11

Answer №6

const doc = "document",
    tags = "getElementsByTagName" ,
    div = "div" ,
    click = "onclick";
window[doc][tags](div)[0][click] = function(){
    alert("1");
}

) The variable document is now declared as const
) Using call method on getElementByTagName to access 'div'
) Changed accessor from dot to bracket for oc variable since it is a string
) Removed duplicate declaration of the variable d
) Corrected spelling from getElementByTagName to getElementsByTagName

Answer 12

const doc = "document",
    tags = "getElementsByTagName" ,
    div = "div" ,
    click = "onclick";
window[doc][tags](div)[0][click] = function(){
    alert("1");
}

) The variable document is now declared as const
) Using call method on getElementByTagName to access 'div'
) Changed accessor from dot to bracket for oc variable since it is a string
) Removed duplicate declaration of the variable d
) Corrected spelling from getElementByTagName to getElementsByTagName

Answer 13

Answer №7

Experience the thrill of manipulating strings http://jsfiddle.net/nqeUN/8/

"document"["gg"]()["getElementsByTagName"]("div")["0"]["onclick"] = function(){alert(1);};

Answer 14

Experience the thrill of manipulating strings http://jsfiddle.net/nqeUN/8/

"document"["gg"]()["getElementsByTagName"]("div")["0"]["onclick"] = function(){alert(1);};

using abbreviated references for javascript objects

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Utilizing Python along with Selenium WebDriver to effectively pause and activate a clickable button that is in plain sight

Combining data using D3's bar grouping feature

Check if a rotated rectangle lies within the circular boundary of the canvas

Manipulate the JQuery code to alter the window's location

Is there a way to use jQuery to automatically make a field stand out visually?

Include the selected class in the relative URL

Utilizing AngularJS to access the corresponding controller from a directive

Displaying JSON data on an HTML page

What is the best way to play a random song when the user clicks a button?

How can parameters be included in ng-href when using ng-click?

Stop images from flipping while CSS animation is in progress

Tips for styling list tooltips with CSS and Bootstrap

AngularJS version 1.5.11 experiencing issues with ng-repeat functionality

"Unleashing the power of Asynchronous Ajax Operations

Cause: Trying to serialize an `object` that is not JSON serializable (such as a "[object Date]"). Ensure that only JSON serializable data types are returned

Troubleshooting: Jquery form submission function not functioning as expected

What is the process for building a series of HTML elements using jQuery?

The challenge of maintaining coherence in AngularJS scopes

Build an interactive phone directory with the power of JavaScript!

Cordova experiencing difficulty loading platform API