CODEWITHSUNDEEP
javascriptdom
Tony the Pony
Tony the Pony

Reputation: 41347

Can I add arbitrary properties to DOM objects?

Can I add arbitrary properties to JavaScript DOM objects, such as <INPUT> or <SELECT> elements? Or, if I cannot do that, is there a way to associate my own objects with page elements via a reference property?

Upvotes: 69

Views: 32852

Answers (7)

Nima Bastani
Nima Bastani

Reputation: 305

I was exploring answers, none have mentioned that in modern JavaScript we can set attributes on domElements using dataset property, it could use on HTMLOrForeignElement (that's a mixin of several features common to the HTMLElement, SVGElement and MathMLElement interfaces).

According to MDN

The dataset property on the HTMLOrForeignElement interface provides read/write access to all the custom data attributes (data-*) set on the element. This access is available both in HTML and within the DOM. It is a map of DOMStrings, one entry for each custom data attribute.

let element = document.getElementById("test");
let footer = document.querySelector("#output");

/* get element values using camelCase names through .dataset */
let sample = element.dataset.sample;
let sampleNumber = element.dataset.sampleNumber;

let dataFromElement = sample + " :: " + sampleNumber;

footer.innerHTML = element.innerHTML  + dataFromElement;
<input type="hidden" id="test" data-sample="Sample" data-sample-number=34 />
<div id="output"> </div>

Although there are concerns about Internet Explorer support and performance on this you can check here.

Upvotes: 2

James
James

Reputation: 6103

ECMAScript 6 has WeakMap which lets you associate your private data with a DOM element (or any other object) for as long as that object exists.

const wm = new WeakMap();
el = document.getElementById("myelement");
wm.set(el, "my value");
console.log(wm.get(el)); // "my value"

Unlike other answers, this method guarantees there will never be a clash with the name of any property or data.

Upvotes: 50

morris4
morris4

Reputation: 2007

In case someone is wondering in 2015, yes, you can - and jQuery is doing just that in data. Just pick future-proof names like vendor prefixes or time-based random suffixes (jQuery).

Upvotes: 6

Andy E
Andy E

Reputation: 344517

Yes, you can add your own properties to DOM objects, but remember to take care to avoid naming collisions and circular references.

document.getElementById("myElement").myProperty = "my value";

HTML5 introduced a valid way of attaching data to elements via the markup - using the data- attribute prefix. You can use this method in HTML 4 documents with no issues too, but they will not validate:

<div id="myElement" data-myproperty="my value"></div>

Which you can access via JavaScript using getAttribute():

document.getElementById("myElement").getAttribute("data-myproperty");

Upvotes: 32

meder omuraliev
meder omuraliev

Reputation: 186562

Sure, people have been doing it for ages. It's not recommended as it's messy and you may mess with existing properties.

If you are looping code with for..in your code may break because you will now be enumerating through these newly attached properties.

I suggest using something like jQuery's .data which keeps metadata attached to objects. If you don't want to use a library, re-implement jQuery.data

Upvotes: 27

bcosca
bcosca

Reputation: 17555

If you must, don't use standard HTML attributes. Here's a tutorial on using custom attributes:

http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

It's HTML5, but it's backward-compatible.

Upvotes: 2

mikefrey
mikefrey

Reputation: 4681

Do you want to add properties to the object, or attributes to the element?

You can add attributes using setAttribute

var el = document.getElementById('myelement');
el.setAttribute('custom', 'value');

or you can just add properties to the javascript object:

var el = document.getElementById('myelement');
el.myProperty = 'myValue';

Upvotes: 8

Related Questions