发表新帖
发表新帖

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

后端 未结
关注
7 988
慢半拍i
慢半拍i 2020-12-03 12:16

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 s

相关标签:
7条回答
  • 孤独总比滥情好
    2020-12-03 12:23

    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.

    0 讨论(0)
  • 栀梦
    2020-12-03 12:27

    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>
    <li id="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:

    <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);   
}

    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

    0 讨论(0)
  • 予麋鹿
    2020-12-03 12:34

    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

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-03 12:38

    DOM is not the structure of the page such as below

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

    DOM is only a representation of the page
    Loosely speaking, DOM is a kind of an Object-Oriented Programming Language, which enables you to access and manipulate on the actual document. 

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

    To be more precise, DOM is an interface rather than an programming language and it's language independent. It happened to be included in Javascript.

    0 讨论(0)
  • 星月不相逢
    2020-12-03 12:39

    DOM element are browser rendered text jquery object you got by use this code var object={} console.log(object);

    0 讨论(0)
  • 情话喂你
    2020-12-03 12:42

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题