What is the reason behind cloneNode not including custom properties?

Question

What is the reason behind cloneNode not including custom properties?

This is in reference to the query about javascript cloneNode and properties.

I have observed the same issue. When using Node.cloneNode, it does not copy any properties that I manually add (as shown in the original post):

    var theSource = document.getElementById("someDiv")
    theSource.dictator = "stalin";

    var theClone = theSource.cloneNode(true);
    alert(theClone.dictator);

The cloned node, theClone, does not retain the "dictator" property.

I have been unable to find a rationale for this behavior. The MDN documentation mentions that cloneNode should "copy all of its attributes and their values", as specified in the DOM specification.

This inconsistency poses a challenge when attempting to create a deep copy of a DOM tree with custom properties included.

Could there be a solution or explanation that I am overlooking?

javascript properties clonenode

Answer 1

Answer №1

In the world of HTML, a property and an attribute are not synonymous.

For setting and getting attributes, it is recommended to use setAttribute() and getAttribute().

let element = document.getElementById("someElement")
element.setAttribute('season', 'summer');

let cloneElement = element.cloneNode(true);
alert(cloneElement.getAttribute('season'));

Answer 2

In the world of HTML, a property and an attribute are not synonymous.

For setting and getting attributes, it is recommended to use setAttribute() and getAttribute().

let element = document.getElementById("someElement")
element.setAttribute('season', 'summer');

let cloneElement = element.cloneNode(true);
alert(cloneElement.getAttribute('season'));

Answer 3

Answer №2

Not all elements have corresponding attributes assigned to them. Introducing a custom property to an element does not automatically create an attribute, meaning the behavior in such cases is not defined by the DOM specification.

In reality, the outcome of adding a property to a host object (like a DOM node) is unspecified and there is no guarantee that it will function correctly. It is highly advised to refrain from this practice. Instead, it is recommended to utilize wrappers if you wish to enhance the functionality of host objects (a method commonly used in libraries like jQuery).

Answer 4

Not all elements have corresponding attributes assigned to them. Introducing a custom property to an element does not automatically create an attribute, meaning the behavior in such cases is not defined by the DOM specification.

In reality, the outcome of adding a property to a host object (like a DOM node) is unspecified and there is no guarantee that it will function correctly. It is highly advised to refrain from this practice. Instead, it is recommended to utilize wrappers if you wish to enhance the functionality of host objects (a method commonly used in libraries like jQuery).

Answer 5

Answer №3

Experimented with this code snippet. The cloneNode function does preserve the custom attribute in the clone, but accessing it directly poses a challenge. Here is a potential solution:

 var theSource = document.getElementById("someDiv")
 theSource.dictator = "stalin";
 //or for better cross-browser compatibility
 theSource.setAttribute('dictator','stalin');

 var theClone = theSource.cloneNode(true);
 alert(theClone.getAttribute('dictator')); //use getAttribute to retrieve stored value

It seems there might be some browser inconsistencies when it comes to cloning expando properties. An interesting testcase from an old Mozilla bug report showcased this issue, wherein Chrome and Firefox failed to replicate the behavior.

//snippet from the bugzilla testcase
var a = document.createElement("div");      
a.order = 50;      
alert(a.order);      
b = a.cloneNode(true);      
alert(b.order);

Answer 6

Experimented with this code snippet. The cloneNode function does preserve the custom attribute in the clone, but accessing it directly poses a challenge. Here is a potential solution:

 var theSource = document.getElementById("someDiv")
 theSource.dictator = "stalin";
 //or for better cross-browser compatibility
 theSource.setAttribute('dictator','stalin');

 var theClone = theSource.cloneNode(true);
 alert(theClone.getAttribute('dictator')); //use getAttribute to retrieve stored value

It seems there might be some browser inconsistencies when it comes to cloning expando properties. An interesting testcase from an old Mozilla bug report showcased this issue, wherein Chrome and Firefox failed to replicate the behavior.

//snippet from the bugzilla testcase
var a = document.createElement("div");      
a.order = 50;      
alert(a.order);      
b = a.cloneNode(true);      
alert(b.order);

What is the reason behind cloneNode not including custom properties?

Answer №1

Answer №2

Answer №3

Similar questions

Steps for displaying mat-spinner for every row in mat-table in Angular 6

How can we ensure that the second function is executed only after the AJAX click method has finished in Javascript?

Style of active link fades after reloading the page

The react-places-autocomplete feature is causing the components below to be shifted downward

Setting the parent's height to match one of its children

Using Firebase Admin or the regular Firebase with Next.js

Increasing the height of a jQuery div element and displaying image captions when hovering over them

Having trouble incorporating a variable into a jQuery selector

Flowplayer playlist stops after playing the first clip

Exposing the full binary in jQuery

Execute multiple AJAX calls to continuously update the results for the end user

Creating dynamic buttons with event listeners and parameters in JavaScript using jQuery

What is the best way to pass a VueJS object to be stored in a Laravel controller?

transferring information to d3.js

Utilize the content within an input field to perform a calculation and showcase the outcome in a separate element

What is the best way to incorporate the PUT method...?

Deactivating a form field depending on a selected radio button in Angular 2

Is there any specific reason not to use a short HTML/CSS syntax like <div a b c></div>?

What sets apart local and global variables when it comes to JavaScript?

Tips on rotating a 3D shape using axis in three.js