Question

这是：

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

与此相同：

var contents = $('#contents');

鉴于jQuery已加载？

Answer 1

不完全!!

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

Answer 2

没有

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

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

因此，您只能在css()电话上调用animate()或$()等jQuery方法。

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

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

Answer 3

关闭，但不一样。它们获得了相同的元素，但jQuery版本包含在jQuery对象中。

等效于此

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

或者

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

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

Answer 4

关于速度差异的说明。将以下snipet附加到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的平均值大约为 200ms （大约181ms的{{1}}到222ms。

从这个简单的测试中你可以看到jQuery花了大约 6次。

当然，这超过15 runs次迭代，因此在更简单的情况下，我可能会使用jQuery来简化使用以及所有其他很酷的事情，例如10000和.animate。但是，从技术上来说，.fadeTo相当更快。

Answer 5

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

document.getElementById('contents')返回的DOM元素允许您执行更改.innerHTML（或.value）等操作，但是您需要使用jQuery methods jQuery对象。

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

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

使用jQuery对象的一个好处是，如果没有返回任何元素，您将不会收到任何错误，因为始终返回一个对象。但是，如果您尝试对null

返回的document.getElementById执行操作，则会出现错误

Answer 6

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

$('#contents')[0]

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

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

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

Answer 7

如果其他人遇到这个......这是另一个区别：

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

使用Chrome时，我发现我的ID包含“/”字符（例如：id =“a / b / c”）：

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

能够找到我的元素但是：

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

没有。

顺便说一句，简单的解决方法是将id移动到name字段。 JQuery使用：

找到元素没有问题

var contents = $('.myclass[name='a/b/c']);

Answer 8

就像大多数人所说的那样，主要区别在于它使用jQuery调用包装在jQuery对象中，而使用直接JavaScript包含原始DOM对象。 jQuery对象当然可以用它来做其他的jQuery函数，但是，如果你只需要做基本样式或基本事件处理之类的简单DOM操作，直接的JavaScript方法总是比jQuery快一点，因为你不要必须加载在JavaScript上构建的外部代码库。它节省了额外的一步。

Answer 9

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

var contents = $('#contents');

代码段不一样。第一个返回Element个对象（source）。第二个，jQuery等价物将返回一个包含零个或一个DOM元素集合的jQuery对象。（jQuery documentation）。在内部，jQuery使用document.getElementById()来提高效率。

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

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

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );

Answer 10

另一个区别：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相同的ID。 jQuery的选择性可以帮助你。

Answer 11

jQuery是基于JavaScript构建的。这意味着它还是JavaScript。

document.getElementById（）

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

jQuery $（）

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

Answer 12

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

Answer 13

以上所有答案均正确。如果您想查看它的运行状况，请不要忘记在浏览器中安装了控制台，在其中可以清晰看到实际结果：

我有一个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

Answer 14

截止到2019年，所有答案都是旧的，您只需尝试一下就可以直接在javascript中访问id键控的filds

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

在线演示！ -https://codepen.io/frank-dspeed/pen/mdywbre

document.getElementById vs jQuery $（）

14 个答案: