Can I add arbitrary properties to DOM objects?

Question

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?

Answer 1

I was exploring answers and want to add that we can set attributes on domElements with 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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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");

Answer 6

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';