【问题标题】:What's the difference between a jQuery object and a DOM element? Difference between .get() and .index()?jQuery 对象和 DOM 元素有什么区别? .get() 和 .index() 之间的区别?
【发布时间】:2011-08-04 13:21:25
【问题描述】:

当我试图找出 jQuery 的 .get().index() 之间的区别时,我被引导到这个问题,我查看了 jQuery API,但我仍然不明白它们之间的区别,也许我不懂术语?

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

编辑:DOM 不只是页面的结构吗? <html><body>etc.</body></html>?

【问题讨论】:

    标签: javascript jquery dom


    【解决方案1】:

    HTML != DOM != Javascript != jQuery,但它们都密切相关。

    浏览器从 Web 服务器接收 HTML 文档,该文档只是文本。浏览器继续解析这个文本到一个内部结构,它实际上可以用来渲染页面。 DOM 表示浏览器对 HTML 文档的内部结构。 Javascript(或其他方法)可用于操作该 DOM,从而改变页面的视觉 render。 DOM 节点和 DOM 元素只是同一事物的两个名称。 DOM 元素代表页面上的视觉或功能元素,它是从原始 HTML 文档创建的。

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

    希望对您有所帮助。 :o)

    【讨论】:

      【解决方案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 包装对象中的位置。这很像您期望它们在数组和其他集合中的工作方式。

      【讨论】:

        【解决方案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

        【讨论】:

          【解决方案4】:

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

          获取 Safari/Chrome(带有他们的开发者菜单)或带有 firebug 的 Firefox,看看这些网络编程工具如何直观地呈现您想了解的内容。

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

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

          一旦你玩过这个,你就会明白什么是文档对象和 javascript 对象。

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

          【讨论】:

            【解决方案5】:

            在我看来,代码

            $('div').get()

            是一个 Jquery 对象,其参数是一个 div 选择器。在这个对象上,get() 被调用。您还可以将 Parameter 视为 constructor(就像在面向对象的语言中一样)参数,因为创建了一个新对象。

            【讨论】:

              【解决方案6】:

              DOM 元素是浏览器渲染的文本 您通过使用此代码获得的 jquery 对象 变量对象={} console.log(object);

              【讨论】:

                【解决方案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 中。

                【讨论】:

                  猜你喜欢
                  • 2018-11-17
                  • 1970-01-01
                  • 1970-01-01
                  • 2011-06-07
                  • 2019-03-21
                  • 1970-01-01
                  • 2012-01-12
                  • 2021-05-10
                  • 2014-12-23
                  相关资源
                  最近更新 更多