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

The binding is created on the first line, where you assign the result of document.createElement to p. This is no different from any other time you assign something to a variable, which always binds the variable name to the value. As far as the script is concerned, there is no other binding occurring. The p is an HTMLElement, and that’s all of the element that’s exposed.

Note that for p.innerHTML = 'new content';, the element doesn’t have to be found because p already refers to the element. That’s what the DOM does: it exposes documents and document elements.

If you later want another reference to the same element, you’ll have to use DOM methods (such as getElementById) to find it. That’s what they’re there for.

As for how the DOM exposes elements, that’s implemented internally and varies from browser to browser or library to library (since the DOM isn’t used just in browsers).