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

当我试图找出jQuery的

.get（）

和

.index（）

之间的区别时，我遇到了这个问题，我浏览了jQuery API，但仍然不知道它们之间的区别，也许我不理解术语

jQuery对象和DOM元素之间有什么区别？DOM元素和DOM节点是一回事吗？它们只是

和

等。DOM节点/DOM元素只是HTML标记吗

---

编辑：DOM不仅仅是页面的结构吗

等。

？

使用

get

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

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

在该示例中，

alldiv

将是一个包含所有匹配元素的数组（在本例中，它将包含DOM中的每个

div

元素）

index

方法返回一个整数，告诉您所选元素相对于其同级元素的位置。考虑下面的HTML：

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

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

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

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

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

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

一些文本
另一个部门

以及以下文件：

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

var div=$（“#示例”）.get（0）；
对于（变量i=0；i

将打印出：

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

3-文本节点（“某些文本”）
1-元素节点（div）
3-文本节点（“另一个div”）
8-注释节点（）
3-文本节点（“注释”）

---

您可以找到节点类型的列表。要了解DOM的真正含义，请参见此

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

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

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

---

希望有帮助o）

当我开始使用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包装器对象中的第n个DOM元素。类似于

$（'input'）.get（0）

为您提供DOM中的第一个

元素，就像您在其上调用

document.getElementById（）

一样（或类似的东西）

.eq（n）

执行类似的操作，但返回一个包含DOM元素的jQuery包装器对象

---

.index（）

只提供特定元素在jQuery包装器对象中的位置。这与您期望它们在数组和其他集合中的工作方式非常相似。

我知道这并不是一种解释，其他人在这里做得相当好。但我认为视觉可以告诉你更多

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

例如DOM“文档对象模型”说明了这一切，但是除非你认为它是一个层次结构，否则你将无法理解文档（HTML页面）中的对象（元素）之间的关系。这些工具D允许您以直观的方式浏览该层次结构

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

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

然而，为了回答这个问题，

.get（）

获取元素并允许您直接与它交互，而不必通过编程来导航DOM层次结构，而

.index（）

，只需找到它在层次结构中的位置的索引，在我看来，代码

$（'div'）.get（）

是一个Jquery对象，其参数是div选择器。在此对象上调用

get（）

。您还可以将参数视为<代码>构造函数< /代码>（如面向对象语言）参数，

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