Menu
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 is between them, maybe i'm not understanding the terminology?
What's the difference between a jQuery object and a DOM element? And are a DOM element and a DOM node the same thing? Are they just <div> and <a> etc. is a DOM node/DOM element just an HTML tag?
EDIT: and isn't the DOM just the structure of the page? <html><body>etc.</body></html>?
936
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)
98
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.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
