What's The Difference Between A Jquery Object And A Dom Element? Difference Between .get() And .index()?

I'm lead to this question when trying to figure out the difference between jQuery's .get() and .index(), I've looked over the jQuery API and I still don't get what the difference i

Solution 1:

HTML != DOM != Javascript != jQuery, but they're all closely related.

The browser receives an HTML document from a web server, which is just text. The browser proceeds to parse this text into an internal structure that it can actually use to render the page visually. The DOM represents that internal structure a browser has of an HTML document. Javascript (or other methods) can be used to manipulate that DOM, which in turn changes the visual render of the page. A DOM node and a DOM element are just two names for the same thing. A DOM element represents a visual or functional element on the page which was created from the original HTML document.

jQuery now is a Javascript library that makes manipulating the DOM easier than with pure Javascript by offering a number of convenience shortcuts. A jQuery object is a Javascript object, which may or may not have anything to do with the DOM (usually it does). A jQuery object is a convenience wrapper around a DOM element in Javascript which is a method to manipulate the DOM which is a representation of the page which was created from an HTML file.

Hope that helps. :o)

Solution 2:

One way I liked to look at it when I was starting out with jQuery is something like this (and yeah, I know everything's not entirely correct, but they worked as loose analogies):

DOM elements are the nodes in your HTML document that you normally get with vanilla Javascript. Something like var foo = document.getElementById('bar') gets you a raw DOM element.

jQuery wrapper objects (for a big part of jQuery development) is basically a whole new object that contains a DOM element. And that's basically it, a container. This is what you get with something like $('#bar') and that's what you get as well by chucking in a DOM element like $(foo). These enable the various jQuery functionalities on your DOM objects --- stuff they normally wouldn't have if they were plain DOM objects.

Building on that, the difference between .get() and .index() is pretty easy.

.get(n) returns the nth DOM element in a jQuery wrapper object. Something like $('input').get(0) gives you the first <input> element in the DOM as if you called document.getElementById() on it (or something similar). .eq(n) does something similar, but returns a jQuery wrapper object containing the DOM element instead.

.index() just gives you what position a particular element is in a jQuery wrapper object. This works a lot like how you'd expect them to work in arrays and other collections.

Solution 3:

The get method is used to access the DOM elements within a jQuery object:

var allDivs = $("div").get();

In that example, allDivs will be an array containing all the matched elements (in this case, it would contain every div element in the DOM).

The index method returns an integer that tells you the position of the selected element relative to its siblings. Consider the following HTML:

<ul><li>1</li><liid="second">2</li><li>3</li></ul>

And the following jQuery:

console.log($("#second").index()) //Prints "1"

As for your other question, a DOM node is pretty much anything in the DOM. Elements are types of nodes (type 1). You also have, for example, text nodes (type 3). An element is pretty much any tag.

To make that clearer, consider the following HTML:

<divid="example">
    Some text
    <div>Another div</div><!--A comment--></div>

And the following JS:

var div = $("#example").get(0);
for(var i = 0; i < div.childNodes.length; i++) {
   console.log(div.childNodes[i].nodeType);   
}

That will print out:

3 - Text node ("Some text")
1 - Element node (div)
3 - Text node ("Another div")
8 - Comment node (<!-- -->)
3 - Text node ("A comment")

You can find a list of node types here. For an excellent introduction to what the DOM actually is, see this MDN article

Solution 4:

I know this is not an explaination as such - others have done a pretty good job here. But I think visuals can tell you a whole lot more.

Get Safari/Chrome (with their developer menus) or Firefox with firebug and have a look at how these web programming tools visually represent the things you want to know about.

For example the DOM "Document Object Model" says it all but you won't understand the relationship between the objects (elements) in the document (html page) unless you consider it as a hierarchy. These toold allow you to navigate that hierarchy in a sensible visual way.

Likewise they also contain evaluation tools which allow you to type in the name of the javascript object to see what it contains.

Once you've played around with this you'll get the idea of what is a document object, and a javascript object.

To answer the question however .get() gets the element and allows you to interact with it directly without having to navigate the DOM hierarchy programatically, whilst .index(), just finds the index of it's position within the hierarchy

Solution 5:

To my mind, the code

$('div').get()

is a Jquery object with a parameter that is a div-selector. On this object the get() is called. You could also consider the Parameter as a constructor (like in object-orientated languages) argument, because a new object is created.