The $() function returns a special JavaScript object containing an array of the DOM elements that match the selector

I'm reading jQuery in Action, and on page 6 it says

The $() function returns a special JavaScript object containing an array of the DOM elements that matc开发者_运维知识库h the selector.

By 'special', I suppose what it means is it's returning a jQuery object. But it's the last part of that sentence that I'm struggling to understand: "an array of the DOM elements".

Q: Can you write a function for me that returns "an array of DOM elements"?

Example: $('p') would return all the p tags. So without writing jQuery from scratch, can you show me in JavaScript code, exactly what is being returned when the author refers to it as "an array of DOM elements"?

Is it simply an array with each element containing strings such as:

<p>foot</p>
<p>bar</p>

I'm aware of Firebug, but I'm concerned that Firebug might be interpreting what is being returned and representing it for me. I guess I'm trying to understand exactly what a DOM element is.

---

It doesn't really return an array, but an array like object (jQuery has toArray() to make a real array).

I say array like because it has a length property and contains the matched elements with numeric keys.

The real object returned has (just to name a few)...

• all jQuery methods (so they can be called on the set).
• numerically keyed elements in set.
• length property.
• selector used.
• jQuery version.
• etc...

---

The array is of DOM elements. Each DOM element is an object in and of itself, having children/parents/properties/etc.

The first sentence of the wiki article on the DOM pretty much sums it up:

The Document Object Model (DOM) is a cross-platform and language-independent convention 
for representing and interacting with objects in HTML, XHTML and XML documents. 
Aspects of the DOM (such as its "Elements") may be addressed and manipulated within 
the syntax of the programming language in use. The public interface of a DOM is 
specified in its application programming interface (API).

http://en.wikipedia.org/wiki/Document_Object_Model

---

Try console.log(document.getElementsByTagName('p')) and notice that it returns for your HTML:

[<p>foot</p>, <p>bar</p>]

Now try $('p') and notice it returns the exact same thing. So if there is a native Javascript function, jQuery will use it, but if there is not then it contains methods within the $() selector to create similar arrays. To access the the array you can use array notation like $('p')[0] if you wanted the unwrapped DOM HTMLElement for the first <p> tag.

The difference is that the $() selector also contains all the jQuery methods, but once you "unwrap" an element it loses these methods. So to get the first element but keep the jQuery wrapper you would do $('p').eq(0) that way you can still use methods like $('p').eq(0).css('background-color','#ff0000') instead of writing $('p')[0].style.backgroundColor = '#ff0000'

---

The $() function in jQuery actually returns a jQuery object. You can read more about it in the documentation. The jQuery object is like an array (it has a length property, for example), although it isn't an array. The jQuery object may be empty or it may contain a set of wrapped DOM elements that match the selector. The DOM elements are a Javascript type.