How a variable binds its value to the DOM?

Question

This might be crazy but it intriguing me for quite some time :)

I would like to know how a javascript variable can bind itself do the DOM after it is appended to the body, for example?

var p = document.createElement('p');
p.innerHTML = 'Hello World';

document.body.appendChild(p);

So now I have this p variable which contains an exact reference of that specific paragraph no matter where it is located inside the body.

p.innerHTML = 'new content';

will easily find the paragraph and change its value

So my question is...how this binding is made?

what If I want to re-create that after the variable is gone? is there any way to attach that again without having to run through the DOM and find it?

I was thinking if somehow each node inside the DOM have its specific identifier that is not the id attribute but some kind of UUID that can be referred later on?

like:

console.log(p.localName); //aoi12e2kj2322444r4t
p = null;

so I can still recover that paragraph node thought this uuid?

In this environment I wouldn't have access to any external node attribute, such name, id, data, etc..

So I am quite curious to know how this binding is created between variable and DOM node?

Answer 1

I believe that it changes depending on the browser your using. There's no standard way to do so. Currently you either use the id or iterate over the dom until you reach the element you want.