logo标签列表

jQuery对象和DOM元素有什么区别？.get()和.index()有什么区别？

javascriptjquerydom
9

当我试图弄清楚jQuery的.get()和.index()之间的区别时，我被引向了这个问题，我已经查看了jQuery API，但仍然不明白它们之间的区别，也许我没有理解术语？

jQuery对象和DOM元素有什么区别？DOM元素和DOM节点是同一回事吗？它们只是<div>和<a>等吗？DOM节点/DOM元素只是HTML标签吗？

编辑：DOM不就是页面的结构吗？<html><body>等</body></html>？

7个回答
17

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 的方法，它是从 HTML 文件创建的页面的表示形式。

希望可以帮到你。:o)

15

当我刚开始学习jQuery时，我喜欢用以下方式来理解（我知道并不是完全正确的，但它们作为松散的比喻很有用）:

DOM元素是HTML文档中的节点，通常使用原生JavaScript获取。例如var foo = document.getElementById('bar')可以获取一个原始的DOM元素。

jQuery包装对象（在jQuery开发中占据重要地位）基本上是一个包含DOM元素的全新对象。这就是通过$('#bar')获取的内容，也是通过添加DOM元素$(foo)获得的对象。这些包装对象使你的DOM对象具备了各种jQuery功能，而这些功能如果它们仅仅是普通的DOM对象时则是不具备的。

进一步说，.get()和.index()之间的区别很容易理解。

.get(n)返回jQuery包装对象中第n个DOM元素。例如$('input').get(0)会返回DOM中第一个<input>元素，就像你调用document.getElementById()一样。而.eq(n)执行类似的操作，但返回的是包含DOM元素的jQuery包装对象。

.index()只给出特定元素在jQuery包装对象中的位置。这与你在数组和其他集合中所期望的工作方式非常相似。

10

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>

以下是JavaScript代码：

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")

您可以在这里找到节点类型列表。有关DOM的优秀介绍，请参见MDN文章。

1

我知道这不是一个详细的解释 - 其他人已经做得很好了。但我认为视觉可以告诉你更多。

获取带有开发者菜单的Safari/Chrome或Firefox与Firebug，看看这些Web编程工具如何以可视化方式呈现您想要了解的内容。

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

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

一旦您尝试过这些工具，您就会明白什么是文档对象和JavaScript对象。

然而，回答问题时.get()获取元素并允许您直接与其交互，而无需通过编程方式导航DOM层次结构，而.index()只是在层次结构中查找其位置的索引。

0

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 中。
0

DOM元素是浏览器渲染的文本 您可以通过使用以下代码获取jQuery对象 var object={} console.log(object);

0

在我看来，这段代码

$('div').get()

是一个带有 div 选择器参数的 Jquery 对象。在此对象上调用 get() 方法。你也可以将该参数视为 构造函数（就像面向对象语言中一样）的参数，因为会创建一个新的对象。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接