Question

当我试图找出jQuery的.get()和.index()之间的区别时，我引出了这个问题，我查看了jQuery API，但我仍然没有得到什么区别是他们之间，也许我不理解术语？

jQuery对象和DOM元素之间有什么区别？ DOM元素和DOM节点是一回事吗？他们只是<div>和<a>等是DOM节点/ DOM元素只是一个HTML标记吗？

编辑：并不是DOM只是页面的结构？ <html><body>etc.</body></html>？

Answer 1

HTML！= DOM！= Javascript！= jQuery，但它们都是密切相关的。

浏览器从Web服务器接收HTML文档，该文档只是文本。浏览器继续解析此文本为一个内部结构，它实际上可以用来呈现页面。 DOM表示浏览器具有HTML文档的内部结构。可以使用Javascript（或其他方法）来操纵该DOM，从而更改页面的可视呈现。 DOM节点和DOM元素只是同一个事物的两个名称。 DOM元素表示页面上的可视或功能元素，它是从原始HTML文档创建的。

jQuery现在是一个Javascript库，通过提供许多便利捷径，使得操作DOM比使用纯Javascript更容易。 jQuery对象是一个Javascript对象，它可能与DOM有关，也可能没有（通常是这样）。 jQuery对象是Javascript中DOM元素的便利包装器，它是一种操作DOM的方法，DOM是从HTML文件创建的页面的表示。

希望有所帮助。：O）

Answer 2

当我开始使用jQuery时，我喜欢看它的一种方式是这样的（是的，我知道一切都不完全正确，但它们可以作为松散的类比）：

DOM元素是HTML文档中通常使用vanilla Javascript获取的节点。像var foo = document.getElementById('bar')之类的东西可以获得原始的DOM元素。

jQuery包装器对象（对于jQuery开发的很大一部分）基本上是一个包含DOM元素的全新对象。而这基本上就是一个容器。这就是$('#bar')这样的东西，你可以通过像$(foo)这样的DOM元素来获取它。这些实现了DOM对象上的各种jQuery功能 - 如果它们是普通的DOM对象，它们通常不具备的东西。

在此基础上，.get()和.index()之间的差异非常简单。

.get(n)返回jQuery包装器对象中的nth DOM元素。像$('input').get(0)之类的东西会为您提供DOM中的第一个<input>元素，就像您在其上调用document.getElementById()（或类似的东西）一样。 .eq(n)执行类似的操作，但返回包含DOM元素的jQuery包装器对象。

.index()只是给出了jQuery包装器对象中特定元素的位置。这很像你期望它们在数组和其他集合中工作的方式。

Answer 3

get方法用于访问jQuery对象中的DOM元素：

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

在该示例中，allDivs将是一个包含所有匹配元素的数组（在这种情况下，它将包含DOM中的每个div元素。）

index方法返回一个整数，告诉您所选元素相对于其兄弟节点的位置。请考虑以下HTML：

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

以下jQuery：

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

至于你的另一个问题，DOM节点几乎是DOM中的任何东西。元素是节点的类型（类型1）。例如，您还有文本节点（类型3）。元素几乎都是任何标记。

为了更清楚，请考虑以下HTML：

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

以下JS：

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

那将打印出来：

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

您可以找到节点类型列表here。有关DOM实际内容的精彩介绍，请参阅此MDN article

Answer 4

我知道这不是一个解释 - 其他人在这里做得很好。但我认为视觉效果可以告诉你更多。

使用firebug获取Safari / Chrome（带有开发人员菜单）或Firefox，并了解这些Web编程工具如何直观地表示您想要了解的内容。

例如，DOM“文档对象模型”说明了这一切，但除非您将其视为层次结构，否则您将无法理解文档（html页面）中对象（元素）之间的关系。这些toold允许您以合理的视觉方式导航该层次结构。

同样，它们还包含评估工具，允许您输入javascript对象的名称以查看它包含的内容。

一旦你玩了这个，你就会知道什么是文档对象和javascript对象。

要回答这个问题，.get()获取元素并允许您直接与其进行交互，而无需以编程方式导航DOM层次结构，而.index()只是找到它在层次结构中的位置索引

Answer 5

在我看来，代码

$('div').get()

是一个Jquery对象，其参数是div-selector。在此对象上调用get()。您还可以将参数视为constructor（与面向对象语言类似）参数，因为会创建一个新对象。

Answer 6

DOM元素是浏览器呈现的文本你使用这个代码得到的jquery对象 var object = {} 的console.log（对象）;

Answer 7

DOM不是页面的结构，如下面的

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

DOM只是页面的表示简而言之，DOM是一种面向对象的编程语言，它使您能够访问和操作实际文档。

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

更确切地说，DOM是一种界面而不是编程语言，它与语言无关。它碰巧包含在Javascript中。

jQuery对象和DOM元素之间有什么区别？ .get（）和.index（）之间的区别？

7 个答案: