Geek Answers Handbook

What is the difference between jQuery object and DOM element? Difference between .get () and .index ()?

I came across this question, trying to figure out the difference between jQuery .get() and .index() , I looked at the jQuery API, and I still do not understand, what is the difference between them, maybe I do not understand the terminology?

What is the difference between jQuery object and DOM element? And what is the DOM element and DOM node the same? Are they just <div> and <a> etc. A DOM element node / DOM with only an HTML tag?

EDIT: and isn't the DOM just a page structure? <html><body>etc.</body></html> ?

+8
javascript jquery dom
source share
7 answers

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

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

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

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

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

And the following jQuery:

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

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

To make this clearer, consider the following HTML:

 <div id="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); }

This will print:

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

Here you can find a list of node types here . For an excellent introduction to the DOM in fact, see MDN Article

+7
source share

One of the ways that I liked to look at it when I started with jQuery is something like this (and yes, I know that everything is not quite right, but they worked as free analogies):

DOM elements are the nodes of your HTML document that you usually get with javascript. Something like var foo = document.getElementById('bar') gets you a raw DOM element.

JQuery wrapper objects (for much of jQuery development) is basically a whole new object containing a DOM element. And that’s basically it, a container. This is what you get with something like $('#bar') , and this is what you get by casting a DOM element like $(foo) . They allow various jQuery functions on your DOM objects - things that they would normally not have if they were DOM objects.

Based on this, the difference between .get() and .index() quite simple.

.get(n) returns an 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 typed document.getElementById() (or something like that) on it. .eq(n) does something similar, but returns a jQuery wrapper object containing a DOM element.

.index() just gives you what position is in the jQuery wrapper object. This is very similar to how you expect them to work in arrays and other collections.

+13
source share

HTML! = DOM! = Javascript! = JQuery, but they are all closely related.

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

jQuery is now a Javascript library that makes it easier to manipulate the DOM than with pure Javascript, offering a few handy combinations. A jQuery object is a Javascript object that may or may not have anything to do with the DOM (usually it does). The jQuery object is a convenient wrapper around the DOM element in Javascript, which is a DOM manipulation method that is a page created from an HTML file.

Hope this helps .: O)

+12
source share

I know that this is not an explanation as such - others have done a very good job here. But I think visual effects can tell you a lot more.

Get Safari / Chrome (from their developers menu) or Firefox using firebug and see how these web programming tools visually represent what you want to know about.

For example, the DOM "Document Object Model" says everything, but you don’t understand the relationship between objects (elements) in a document (html page), except for its hierarchy. These toold allow you to navigate this hierarchy in a reasonable visual way.

In addition, they also contain evaluation tools that allow you to enter a javascript object name to see what it contains.

Once you play with this, you get an idea of ​​what a document object is and a javascript object.

To answer the question, however, .get() receives this element and allows you to directly interact with it without performing programmatic orientation of the DOM hierarchy, while .index() just finds the index of its position in the hierarchy

+1
source share

In my opinion, the code

$('div').get()

- A jQuery object with a parameter, which is a div selector. get() is called on this object. You can also consider a parameter as a constructor argument (for example, in object-oriented languages), because a new object is created.

0
source share

The DOM element is the text processed by the browser. The jquery object that you received using this code var object = {} console.log (object);

0
source share

DOM is not a page structure like below

  <html><body>etc.</body></html>

DOM is just a page view
In short, the DOM is a kind of object-oriented programming language that allows you to access and manipulate the actual document.

 document.getElementById("a") /* here document is an object and getElementById is an method of it */

To be more precise, the DOM is an interface, not a programming language, and it is language independent. This turned out to be included in Javascript.

0
source share

More articles:


All Articles