How can jquery object use index to access DOM like array?

Question

I knew that jQuery function $("selector") returns an object.

var divTest = $(".test"); // returns object
Array.isArray(divTest); // false
typeof divTest; // "object"

Using this object wrapped by the jQuery function, we can use the API of jQuery.

The point that I cannot understand is how we can access native DOM element(s) using an index in jQuery objects like we do in arrays.

<div class="test first"></div>
<div class="test second"></div>
<div class="test third"></div>

//...
var divTest = $(".test");
console.log(divTest[0]); // <div class="test first"></div>
console.log(divTest[1]); // <div class="test second"></div>
console.log(divTest[2]); // <div class="test third"></div>

I opened the uncompressed jQuery source file. I think this question is related with the following method.

The method jQuery.fn.init returns jQuery.makeArray(selector, this). makeArray is extended from jQuery.

Can someone give comments to help me understand this issue?

Issue? That's standard behavior of any jQuery object and other array-like objects. While both true arrays and array-like objects (pseudo-array?) have an index and length that's where the similarities end. The fact that jQuery has methods like makeArray() is evidence that the common jQuery Object isn't an array (otherwise why would makeArray() exist in the first place) — zer00ne
– zer00ne, Commented Jan 8, 2018 at 8:06
Check out my answer for a thorough explanation @YounghunJung. — Angel Politis
– Angel Politis, Commented Jan 23, 2018 at 7:58

Angel Politis · Accepted Answer · 2018-01-08 08:31:16Z

5

There is no issue. The object $(".test") returns is array-like (behaves like an array), so you can access the elements it contains the same way as you would if you were using the native function document.querySelectorAll(".test").

There is nothing special to it. What jQuery does is use native functions to get the elements and then inject each one to its array-like object. Check out the example below to see how a simple jQuery-like function can be made.

Example:

/* ----- JavaScript ----- */

function $ (selector) {
  /* Check whether the context is a $ instance. */
  if (this instanceof $) {
    /* Get the elements matching the given selector. */
    var elements = document.querySelectorAll(selector);

    /* Set the length property of the object. */
    this.length = 0;

    /* Iterate over every element gotten. */
    for (var i = 0, l = elements.length; i< l; i++) {
      /* Inject each element in the object. */
      this[i] = elements[i];

      /* Increment the length. */
      this.length++;
    }

    /* Cache the selector as a public property of the object. */
    this.selector = selector;
  }
  else return new $(selector);
}


/* --- Use --- */

var elements = $(".test");
console.log(typeof elements);
console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);

<!----- HTML ----->
<div id = "e1" class = "test"></div>
<div id = "e2" class = "test"></div>
<div id = "e3" class = "test"></div>

Notes:

Trying to learn JavaScript by reading the jQuery source code is a bad idea.
In order for an object to be array-like, it must have:
- numeric properties (indices),
- a numeric length property and
- a splice method (optional, to be logged as an array in the console).

edited Jan 8, 2018 at 8:31

answered Jan 8, 2018 at 7:58

Angel Politis

11.4k15 gold badges51 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mdatsev Over a year ago

Is it possible to make any object array-like?

Angel Politis Over a year ago

Yes. In order for an object to be array-like, it must have numeric properties and a length. In order to be logged as an array in the console as well, it must also have a splice method @mdatsev.

Younghun Jung Over a year ago

Thanks. Actually I do not learn JS by reading the jQuery.. The point is that I haven't understood Array-like object. Thanks for your reply!!

Angel Politis Over a year ago

You're welcome @YounghunJung. I'm glad I could help. I hope it's clear to you what an array-like object is now :)

Collectives™ on Stack Overflow

How can jquery object use index to access DOM like array?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related