javascript jQuery 对象和 DOM 元素有什么区别？.get() 和 .index() 的区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6942193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
提问by android.nick
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?
当我试图找出 jQuery.get()和之间的区别时，我导致了这个问题.index()，我查看了 jQuery API，但我仍然不明白它们之间的区别是什么，也许我不理解术语？
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?
jQuery 对象和 DOM 元素有什么区别？DOM 元素和 DOM 节点是一回事吗？他们只是<div>和<a>等是DOM节点/ DOM元素只是一个HTML标签？
EDIT: and isn't the DOM just the structure of the page? <html><body>etc.</body></html>?
编辑：DOM 不只是页面的结构吗？<html><body>etc.</body></html>?
采纳答案by James Allardice
The getmethod is used to access the DOM elements within a jQuery object:
该get方法用于访问 jQuery 对象中的 DOM 元素：
var allDivs = $("div").get();
In that example, allDivswill be an array containing all the matched elements (in this case, it would contain every divelement in the DOM).
在那个例子中，allDivs将是一个包含所有匹配元素的数组（在这种情况下，它将包含divDOM 中的每个元素）。
The indexmethod returns an integer that tells you the position of the selected element relative to its siblings. Consider the following HTML:
该index方法返回一个整数，告诉您所选元素相对于其兄弟元素的位置。考虑以下 HTML：
<ul>
<li>1</li>
<li id="second">2</li>
<li>3</li>
</ul>
And the following jQuery:
以及以下 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.
至于你的另一个问题，DOM 节点几乎是 DOM 中的任何东西。元素是节点的类型（类型 1）。例如，您还有文本节点（类型 3）。元素几乎是任何标签。
To make that clearer, consider the following HTML:
为了更清楚地说明这一点，请考虑以下 HTML：
<div id="example">
Some text
<div>Another div</div>
<!--A comment-->
</div>
And the following JS:
以及以下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
回答by deceze
HTML != DOM != Javascript != jQuery, but they're all closely related.
HTML != DOM != Javascript != jQuery，但它们都密切相关。
The browser receives an HTML document from a web server, which is just text. The browser proceeds to parsethis text into an internal structure that it can actually use to renderthe 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 renderof 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.
浏览器从 Web 服务器接收一个 HTML 文档，它只是文本。浏览器继续将此文本解析为一个内部结构，它实际上可以用来以视觉方式呈现页面。DOM 表示浏览器具有的 HTML 文档的内部结构。Javascript（或其他方法）可用于操作该 DOM，进而改变页面的视觉呈现。DOM 节点和 DOM 元素只是同一事物的两个名称。DOM 元素表示从原始 HTML 文档创建的页面上的视觉或功能元素。
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.
jQuery 现在是一个 Javascript 库，它通过提供许多方便的快捷方式使操作 DOM 比使用纯 Javascript 更容易。一个 jQuery 对象是一个 Javascript 对象，它可能与 DOM 有任何关系，也可能没有任何关系（通常是这样）。jQuery 对象是 JavaScript 中 DOM 元素的便捷包装器，它是一种操作 DOM 的方法，DOM 是从 HTML 文件创建的页面的表示。
Hope that helps. :o)
希望有帮助。:o)
回答by Richard Neil Ilagan
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):
当我开始使用 jQuery 时，我喜欢看待它的一种方式是这样的（是的，我知道一切并不完全正确，但它们作为松散的类比工作）：
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.
DOM 元素是 HTML 文档中通常使用普通 Javascript 获得的节点。类似的东西var foo = document.getElementById('bar')可以为您提供原始 DOM 元素。
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.
jQuery 包装器对象（用于 jQuery 开发的很大一部分）基本上是一个包含 DOM 元素的全新对象。基本上就是这样，一个容器。这就是你通过类似的东西得到的，这也是你$('#bar')通过插入像$(foo). 这些在你的 DOM 对象上启用了各种 jQuery 功能——如果它们是普通的 DOM 对象，它们通常不会有这些功能。
Building on that, the difference between .get()and .index()is pretty easy.
在此基础上，.get()和之间的区别.index()非常简单。
.get(n)returns the nthDOM 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.
.get(n)返回nthjQuery 包装器对象中的DOM 元素。类似的东西$('input').get(0)给你<input>DOM 中的第一个元素，就像你调用document.getElementById()它一样（或类似的东西）。.eq(n)做一些类似的事情，但返回一个包含 DOM 元素的 jQuery 包装器对象。
.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.
.index()只是为您提供特定元素在 jQuery 包装器对象中的位置。这很像您期望它们在数组和其他集合中工作的方式。
回答by T9b
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.
获取 Safari/Chrome（带有开发人员菜单）或带有 firebug 的 Firefox，看看这些 Web 编程工具如何直观地表示您想了解的内容。
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.
例如，DOM“文档对象模型”说明了一切，但除非您将其视为层次结构，否则您将无法理解文档（html 页面）中的对象（元素）之间的关系。这些工具允许您以合理的视觉方式导航该层次结构。
Likewise they also contain evaluation tools which allow you to type in the name of the javascript object to see what it contains.
同样，它们还包含评估工具，允许您输入 javascript 对象的名称以查看它包含的内容。
Once you've played around with this you'll get the idea of what is a document object, and a javascript object.
一旦你玩过这个，你就会明白什么是文档对象，什么是 javascript 对象。
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
然而，要回答这个问题，.get()获取元素并允许您直接与它交互，而无需以编程方式导航 DOM 层次结构，而.index(), 只需找到它在层次结构中的位置的索引
回答by Timo
To my mind, the code
在我看来，代码
$('div').get()
$('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.
是一个带有 div 选择器参数的 Jquery 对象。在这个对象get()上调用。您还可以将 Parameter 视为constructor（就像在面向对象的语言中一样）参数，因为创建了一个新对象。
回答by user1620882
DOM element are browser rendered text jquery object you got by use this code var object={} console.log(object);
DOM 元素是您通过使用此代码获得的浏览器呈现的文本 jquery 对象 var object={} console.log(object);
回答by bombs
DOM is not the structure of the page such as below
DOM 不是页面的结构，例如下面
<html><body>etc.</body></html>
DOM is only a representationof 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.
DOM 只是页面的表示
松散地说，DOM 是一种面向对象的编程语言，它使您能够访问和操作实际文档。
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.
更准确地说，DOM 是一种接口而不是一种编程语言，它与语言无关。它恰好包含在 Javascript 中。
