Question

Is this possible in javascript?

I’m trying to set the property name of an object to be a “HTMLInputElement”:

var el = $('#something').get(0),
    obj = {};

obj[el] = 'some random data'; 

but I don’t think it works 🙁

I get some error:

ncaught Error: Syntax error, unrecognized expression: [object
HTMLInputElement]

But I’m not sure if it’s because of what I’m trying to do 🙂

However when I console.log(obj), it looks fine, with “object HTMLInputElement” inside key names, but I don’t know if it’s a real object, or just some string

Answer 1

That is certainly possible. Anything between the property brackets is allowed. The toString() method is called.

// Test case:
var obj = {};
obj[document.body] = '1';
console.log(JSON.stringify(obj));  // Shows {"[object HTMLBodyElement]":"1"}

---

Problem

After reading your comments, I see what you’re trying to do: Creating a map of DOM elements, for later use in a jQuery wrapper. This does not work, because, as I mentioned, keys are strings.

// Your intentions:
var obj = {};
var body = $('body').get(0);
obj[body] = {secret: 'Some text'};
$.each(obj, function(elem, data) {
    // Example:
    $(elem).text(data.secret);

    // Expected (filled in variables):
    $(body).text('Some text');

    // What actually happens
    $('[object HTMLBodyElement]').text('Some text');
    //  ^^^^^^^^^^^^^^^^^^^^^^ This is an invalid jQuery selector!
});

Solution

Use WeakMap objects for associating objects as key-value pairs, without coercing stringa. This is not well-supported, but that can be solved easily by using a polyfill.