CODEWITHSUNDEEP
javascriptjquerydom
John Boe
John Boe

Reputation: 3611

How to create shallow copy of element?

Recently in this question I asked how to find out if style is present in a class. I was told (by skobaljic) that I need to clone element. During the call .clone() of the element (jQuery method) the resulting object contains default styles (e.g. from style sheet) so the inserted styles are not included in the clone. This is how I understood it. But it seems to be strange to clone complete element including all his childern elements which may be hunderets or thousands when I need to detect if 6 style are present. I cheched the jQuery's code for clone method. There is this:

destElements = getAll( clone );
srcElements = getAll( elem );

So the function getAll is called twice.

Then I checked what contains getAll:

var ret = typeof context.getElementsByTagName !== "undefined" ?
    context.getElementsByTagName( tag || "*" ) :
    typeof context.querySelectorAll !== "undefined" ?
    context.querySelectorAll( tag || "*" ) :
    [];

From Mozilla manual:

The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name. The subtree underneath the specified element is searched, excluding the element itself.

Document.querySelectorAll() - Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

So it is evident that creating deep copy of the element is pointless and it takes performance. This problem is yet intensified when I need to make deep search/comparison which would lead to excessive waste of resources. I would like to clone the element without it's children element. Is this possible? The clone should contain the default styles just like you do it with .clone(). How to do it?

Upvotes: 0

Views: 1781

Answers (1)

danielarend
danielarend

Reputation: 1427

i believe this can help you:

Source: http://www.w3schools.com/jsref/met_node_clonenode.asp

  // Copy the element and its child nodes
  var clone_with_child = yourElement.cloneNode(true);
  // Copy only the element
  var clone_without_child = yourElement.cloneNode(false);

Upvotes: 3

Related Questions