Are HTML DOM elements stored by reference in Javascript array?

Question

I have a custom JavaScript object and I want it to be "linked" with an element from the DOM.

var my_object = {}
var element = document.getElementsByClassName("a_class")[7];
my_object["element"] = element;

As I will need many of these objects, I wondered if directly storing DOM object obtained from .getElement() was a good idea?

I am scared that this will construct heavy objects. Is it the case, or does Javascript use some kind of clever and light references?

Alternatively, I thought to add a custom id to the element before stroring this id but this is less convenient.

There is no object creation... we are just storing a reference to an exisitng object — Arun P Johny
– Arun P Johny, Commented Aug 26, 2015 at 8:04
You are not actually storing the element but instead creating a cacheable reference to the element at hand. — Ohgodwhy
– Ohgodwhy, Commented Aug 26, 2015 at 8:05
@ArunPJohny Do you know if it works the same way with object got using jQuery? — Delgan
– Delgan, Commented Aug 26, 2015 at 8:11
jQuery creates a jQuery object... but the internal dom references will be the same.... so even that overhead will be very low unless you are dealing with 10s of 1000s of jQuery object — Arun P Johny
– Arun P Johny, Commented Aug 26, 2015 at 8:15

kemicofa · Accepted Answer · 2015-08-26 08:40:37Z

6

Yes, if you store an HTML DOM element into an object, you are storing its reference.

This is good practice because imagine if you have to access an element multiple times, rather than finding that element every single time, get it once and store it.

The process of finding an element is a lot less efficient compared to retrieving it through an object, especially if you use jQuery.

It does not take up a lot of memory, but this doesn't mean you should be storing every single HTML element on your page in an object.

answered Aug 26, 2015 at 8:40

kemicofa

17.7k10 gold badges93 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mjz19910 · Accepted Answer · 2015-08-26 08:26:24Z

0

Javascript just saves it as a reference.

The object is not dereferenced until you retrieve data.

Like console.log([reference to dereference and log])

There is no slow down until the data is dereferenced

edited Aug 26, 2015 at 8:26

answered Aug 26, 2015 at 8:06

mjz19910

2421 silver badge13 bronze badges

6 Comments

iCollect.it Ltd Over a year ago

The object already exists in this example, so what do you mean by "The object is not created until you retrieve data.". Also why on Earth are you mentioning slowdowns on deferencing? Aside from the first sentence, this looks like a random assortment of comments that have no real meaning.

mjz19910 Over a year ago

bc console.log takes forever

mjz19910 Over a year ago

woops i was confusing i fixed it

iCollect.it Ltd Over a year ago

What has console.log got to do with the question asked?

mjz19910 Over a year ago

nothing just a good example on how retrieving data from inside something is slow

|

Collectives™ on Stack Overflow

Are HTML DOM elements stored by reference in Javascript array?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related