Does jQuery/JS return actual DOM nodes, or just references to them?

Question

The reason I ask is because I'm thinking of storing a bunch of DOM nodes in this huge and multi-dimensional array I have.

Cost: takes up space in memory. The question is how much space, and that depends on whether I'm getting references or actual DOM nodes.

Benefits: 1) It'll make my code a lot simpler. 2) I could avoid traversing and instead just reference the DOM node from my array.

Thoughts?

Answer 1

This answer is wrong, please see the comments below.

---

Document.getElementById() and methods or wrappers that rely on it return a reference.
Likewise for Document.querySelector().

This all stems from the DOM4 spec, which states that (emphasis mine):

A collection is an object that represents a lists of DOM nodes. A collection can be either live or static. Unless otherwise stated, a collection must be live.

From a programming point of view this notion is easy to understand, you waste less memory and no time is spent copying things around, leading to faster execution.

However, for Document.querySelectorAll() we have an interesting case:

The NodeList object returned by the querySelectorAll() method must be static.

This means, as MDN puts it, that Document.querySelectorAll()

Returns a non-live NodeList of all the matching element nodes.

This means that the returned set is not a set of references to the original nodes, but instead to a set of nodes that represent the nodes at the time the query was executed. This means that a copy of all the matching nodes had to be made and you're no longer working with references to the live nodes.

Answer 2

From jQuery site:

… jQuery() — which can also be written as $() — searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements

jQuery Documentation

Answer 3

jQuery returns the actual DOM Node. It's why you will find yourself writing $(this) most of the time. This is because you want to wrap your node in jQuery to be able to use some jQuery methods. However, it's recommended (almost in the guidelines) to cache your DOM nodes through references. For example,

var div = $('div');
div.dosomeMethod();
div.append();

This ensures that you are not traversing the entire DOM tree (the expensive DOM part) whenever you're trying to access some element. Whenever you do updates, ensure you're doing them as a batch.

Answer 4

in this example I show how to clone existing DOM element to object in memory, also create object in memory without pushing it to body, created collection objects, appended elements from collection to body and keep referenced objects, removed from body. and so many operations...

var $newElement1 = $(selector).clone(); // create new element from existing and store in memory
var $newElement2 = $('<div>blabla</div>'); // create new element from html code and store in memory

var elements = [];
elements.push($newElement1);
elements.push($newElement2);

for(var i in elements) {
  elements[i].appendTo($('body'));
}

$newElement1.remove(); // will remove it from body

** but I recommend You to use frameworks like: angularjs, reactjs, emberjs to save Your time

Answer 5

A reference to the object is returned. See here: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Answer 6

In short:

• Some JavaScript methods return references to the DOM Node.
• Some JavaScript methods return array-like objects that contain references to the DOM Nodes. These objects aren't very big(?).
• jQuery returns a jQuery object that contains references to the DOM Node(s). These jQuery objects could get quite big, depending on how many chained calls are made.
• The actual DOM nodes are never actually returned "by value".
• The size of the references themselves are small. Typically the size of a pointer.

---

JavaScript:

• getElementById and querySelector(?) return references to the DOM Node.
• getElementsByClassName and getElementsByTagName return live HTMLCollections.
• getElementsByName returns a live NodeList.
• getElementsByNameNS returns a live NodeList or a live HTMLCollection, depending on the browser.
• querySelectorAll returns a non-live NodeList.

HTMLCollection and NodeList contain references to DOM nodes. They don't seem to be very big objects.

---

Live vs. Non-Live

From MDN:

In some cases, the NodeList is a live collection, which means that changes in the DOM are reflected in the collection. For example, Node.childNodes is live:

 var parent = document.getElementById('parent');
 var child_nodes = parent.childNodes;
 console.log(child_nodes.length); // let's assume "2"
 parent.appendChild(document.createElement('div'));
 console.log(child_nodes.length); // should output "3"

In other cases, the NodeList is a static collection, meaning any subsequent change in the DOM does not affect the content of the collection. document.querySelectorAll returns a static NodeList.

---

jQuery

From learn.jquery.com

A jQuery object is an array-like wrapper around one or more DOM elements. To get a reference to the actual DOM elements (instead of the jQuery object), you have two options. The first (and fastest) method is to use array notation:

$( "#foo" )[ 0 ]; // Equivalent to document.getElementById( "foo" )

The second method is to use the .get() function:

$( "#foo" ).get( 0 ); // Identical to above, only slower.

You can also call .get() without any arguments to retrieve a true array of DOM elements.