document.getElementById与jQuery $（）

620

这是：

var contents = document.getElementById('contents');

与此相同：

var contents = $('#contents');

鉴于jQuery已加载？

javascript  jquery  jquery-selectors 
— 菲利普·森
source
10
除了答案中提出的要点外，jQuery版本是app。慢100倍。
8
在某处被证明吗？
— FranBran 2015年
12
@torazaburo实际上，jQuery版本的速度甚至没有慢3倍（至少在最新的Chrome浏览器中）。请参阅：jsperf.com/getelementbyid-vs-jquery-id/44
— 米哈尔Perłakowski
2
@MichałPerłakowski在该链接中，jQuery版本的速度慢了10倍。2600万vs 240万
— 克劳迪亚·克鲁安加17'Aug
1
正确的JSPerf更新链接是：jsperf.com/getelementbyid-vs-jquery-id以我为例（FF 58），它慢了1000倍。无论如何，jQuery仍然每秒执行250万次操作。通常，这不是问题，当然不能在功能上进行比较。
— Diego Jancic

Answers:

1016

不完全是！！

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

在jQuery中，获得与以下结果相同的结果 document.getElementById，可以访问jQuery Object并获取该对象中的第一个元素（请记住JavaScript对象的行为类似于关联数组）。

var contents = $('#contents')[0]; //returns a HTML DOM Object
— 约翰·哈索克
source
24
对于任何有兴趣的人document.getElementBy，在<IE8中无法正常工作。它也可以获取元素，name因此从理论上讲，您不仅可以说document.getElementById是误导，而且可以返回不正确的值。我认为@John是新的，但我认为添加它不会有任何伤害
— Lime
14
如果您的标识符不固定，请当心。$('#'+id)[0]不等于，document.getElementById(id)因为id可能包含在jQuery中被特殊对待的字符！
— 雅各布2012年
1
这非常有帮助-从来都不知道！我敢肯定，我以前确实使用过它，这让我感到困惑。嘿，你每天都学点东西！谢谢！
— jedd.ahyoung 2012年
3
谷歌jquery equivalent of document.getelementbyid，第一个结果是这篇文章。谢谢！！！
— ajakblackgoat 2013年
$('#contents')[0].id返回ID名称。
— 奥马尔
139

没有。

调用document.getElementById('id')将返回原始DOM对象。

调用$('#id')将返回一个包装DOM对象并提供jQuery方法的jQuery对象。

因此，您只能调用jQuery方法，例如css()或animate()在$()通话。

您还可以编写$(document.getElementById('id'))，它将返回一个jQuery对象，它等效于$('#id')。

您可以通过编写从jQuery对象获取基础DOM对象$('#id')[0]。

— ak
source
4
您是否偶然知道哪个更快-$（document.getElementById（'element'））vs $（'＃element'）？
— IvanIvković13年
10
@IvanIvković：第一个更快，因为它不涉及字符串解析。
— SLaks
1
@SLaks原始DOM对象和jQuery对象之间的主要区别是什么？只是使用jQuery对象，我们就有能力应用jQuery方法？
— Roxy'Pro
@ Roxy'Pro：它们是不同的对象。jQuery对象包装DOM对象。请参阅文档。
— SLaks
此文档的JavaScript DOM对象与jQuery对象看起来很有用。In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.
— user3454439
31

接近，但不一样。他们得到相同的元素，但是jQuery版本包装在jQuery对象中。

等效的是这个

var contents = $('#contents').get(0);

或这个

var contents = $('#contents')[0];

这些会将元素从jQuery对象中拉出。

— 权利说弗雷德
source
29

关于速度差异的注释。将以下代码片段附加到onclick调用中：

function myfunc()
{
    var timer = new Date();

        for(var i = 0; i < 10000; i++)
        {
            //document.getElementById('myID');
            $('#myID')[0];
        }


    console.log('timer: ' + (new Date() - timer));
}

交替注释掉一个，然后注释掉另一个。在我的测试中

的document.getElementById平均大约为35ms（波动从25ms最高52ms的约15 runs）

另一方面，

jQuery平均大约200毫秒（从181ms到222ms大约15 runs）。

从这个简单的测试中，您可以看到jQuery花费了大约6倍的时间。

当然，这是在10000迭代中完成的，因此在更简单的情况下，我可能会使用jQuery来简化易用性，并使用所有其他很酷的功能（例如.animate和）.fadeTo。但是，是的，从技术上讲getElementById要快得多。

— Nurdyguy
source
感谢您的回答。我想问问，我要全部更换$('#someID') 用document.getElementById("someID") ？我正在做一些我已经广泛使用的工作，$('#someID')并且对于大文件输入，我的页面运行缓慢。请建议我应该怎么做。
— Mazhar MIK
如果要在同一个作用域中多次重复使用同一个var $myId = $('#myId');变量，则将其保存，例如，然后重复使用保存的变量$myId。通过id查找通常是一件相当快的事情，因此，如果页面缓慢，则可能有不同的原因。
— nurdyguy
谢谢@nurdyguy。那很有帮助。我将尝试实现这一点。
— Mazhar MIK
17

否。第一个返回DOM元素，或者为null，而第二个总是返回jQuery对象。如果没有ID为的元素，则jQuery对象将为空contents匹配。

返回的DOM元素document.getElementById('contents')允许您执行诸如更改.innerHTML（或.value）等操作，但是您需要在jQuery Object上使用jQuery方法。

var contents = $('#contents').get(0);

更为对等，但是如果没有contents匹配ID为的元素，document.getElementById('contents')则将返回null，但是$('#contents').get(0)将返回undefined。

使用jQuery对象的一个​​好处是，如果不返回任何元素，则不会出现任何错误，因为始终会返回一个对象。但是，如果您尝试对null返回的进行操作，则会收到错误消息document.getElementById

— 马特
source
15

不，实际上相同的结果是：

$('#contents')[0]

jQuery不知道查询将返回多少结果。您得到的是一个特殊的jQuery对象，它是与查询匹配的所有控件的集合。

使jQuery如此方便的部分原因在于，在此对象上调用的MOST方法看起来像是为一个控件所用，实际上处于对集合中所有成员调用的循环中

使用[0]语法时，您将从内部集合中获取第一个元素。此时，您将获得一个DOM对象

— 安德烈
source
10

万一有人碰到这个……这是另一个区别：

如果id包含HTML标准不支持的字符（请参见此处的 SO问题），那么即使getElementById可以，jQuery可能也找不到它。

这是使用Chrome浏览器通过一个包含“ /”字符（例如：id =“ a / b / c”）的ID发生的： 

var contents = document.getElementById('a/b/c');

能够找到我的元素，但是： 

var contents = $('#a/b/c');

没有。

顺便说一句，简单的解决方法是将该ID移到名称字段。jQuery可以使用以下方法轻松找到元素：

var contents = $('.myclass[name='a/b/c']);
— 用户名
source
5

就像大多数人说的那样，主要区别在于以下事实：使用jQuery调用将其包装在jQuery对象中，而使用直接JavaScript将其包装在原始DOM对象中。jQuery对象当然可以使用它执行其他jQuery功能，但是，如果您只需要执行简单的DOM操作（例如基本样式或基本事件处理），那么直接的JavaScript方法总是比jQuery快一点，因为您不需要不必加载基于JavaScript的外部代码库。它节省了额外的步骤。

— 科比
source
5

var contents = document.getElementById('contents');

var contents = $('#contents');

代码段不相同。第一个返回一个Element对象（source）。第二个，等效的jQuery将返回一个jQuery对象，其中包含零个或一个DOM元素的集合。（jQuery文档）。jQuery内部document.getElementById()用于提高效率。

在这两种情况下，如果找到多个元素，则仅返回第一个元素。

当检查jQuery的github项目时，我发现以下几行代码片段似乎在使用document.getElementById代码（https://github.com/jquery/jquery/blob/master/src/core/init.js第68行及以上）

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );
— 尼普纳
source
4

另一个区别：getElementById返回第一个匹配项，而$('#...')返回一个匹配项集合-是的，可以在HTML文档中重复相同的ID。

此外，getElementId可以从文档中调用，而$('#...')可以从选择器中调用。因此，在下面的代码中，document.getElementById('content')将返回整个主体，但$('form #content')[0]将返回到表单内部。

<body id="content">
   <h1>Header!</h1>
   <form>
      <div id="content"> My Form </div>
   </form>
</body>

使用重复的ID似乎很奇怪，但是如果您使用的是Wordpress之类的模板或插件，则可能会使用与内容中相同的ID。jQuery的选择性可以帮助您。

— 史蒂夫·班克斯
source
2

jQuery是基于JavaScript构建的。这意味着无论如何它只是JavaScript。

document.getElementById（）

document.getElementById（）方法返回具有具有指定值的ID属性的元素，如果不存在具有指定ID的元素，则返回null。一个ID在页面内应唯一。

jQuery $（）

以id选择器作为参数调用jQuery（）或$（）将返回一个jQuery对象，该对象包含一个零或一个DOM元素的集合。每个id值在文档中必须仅使用一次。如果为多个元素分配了相同的ID，则使用该ID的查询将仅选择DOM中的第一个匹配元素。

— 哈迪·米尔
source
1

我开发了一个用于在Web浏览器中存储DOM树的noSQL数据库，该数据库中对页面上所有DOM元素的引用都存储在简短索引中。因此，不需要函数“ getElementById（）”来获取/修改元素。当在页面上实例化DOM树中的元素时，数据库将为每个元素分配代理主键。这是一个免费工具http://js2dx.com

— 贡喜
source
1

以上所有答案都是正确的。万一您希望看到它的实际效果，请不要忘记在浏览器中安装了Console，在其中您可以清楚地看到实际结果：

我有一个HTML：

<div id="contents"></div>

转到控制台(cntrl+shift+c)并使用以下命令清晰地查看结果

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

如我们所见，在第一种情况下，我们得到了标签本身（严格来说就是HTMLDivElement对象）。在后者中，我们实际上没有一个普通的对象，而是一个对象数组。并且如上述其他答案所述，您可以使用以下命令：

$('#contents')[0]
>>> div#contents
— 马扎尔·米克
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.