document.getElementById vs jQuery $（）
这是：
var contents = document.getElementById('contents'); 与此相同：
var contents = $('#contents');
鉴于jQuery加载？
不完全是！！
document.getElementById('contents'); //returns a HTML DOM Object var contents = $('#contents'); //returns a jQuery Object
在jQuery中，为了得到与document.getElementById相同的结果，可以访问jQuery对象并获取对象中的第一个元素（记住JavaScript对象的作用类似于关联数组）。
var contents = $('#contents')[0]; //returns a HTML DOM Object
没有。
调用document.getElementById('id')将返回一个原始的DOM对象。
调用$('#id')将返回一个包装DOM对象并提供jQuery方法的jQuery对象。
因此，您只能在$()调用中调用jss方法（如css()或animate() $() 。
你也可以写$(document.getElementById('id')) ，它将返回一个jQuery对象，相当于$('#id') 。
您可以通过编写$('#id')[0]从jQuery对象中获取底层的DOM对象。
closures，但不一样。 他们得到相同的元素，但jQuery版本被包装在一个jQuery对象。
相当于这个
var contents = $('#contents').get(0);
或这个
var contents = $('#contents')[0];
这些将从jQuery对象中拉出元素。
不。第一个返回一个DOM元素，或者第二个返回一个jQuery对象。 如果没有匹配contents标识的元素，jQuery对象将是空的。
document.getElementById('contents')返回的DOM元素允许你做一些事情，比如改变.innerHTML （或.value ）等，但是你需要在jQuery对象上使用jQuery方法 。
var contents = $('#contents').get(0);
document.getElementById('contents')将返回null，但是$('#contents').get(0)将返回undefined。
使用jQuery对象的一个好处是，如果没有元素被返回，你将不会得到任何错误，因为总是返回一个对象。 但是，如果尝试对document.getElementById返回的null执行操作，将会出现错误
不，实际上同样的结果是：
$('#contents')[0]
jQuery不知道查询返回多less结果。 你得到的是一个特殊的jQuery对象，它是与查询匹配的所有控件的集合。
让jQuery如此方便的部分原因是，在这个对象上调用的MOST方法看起来像是一个控件，实际上是在所有成员int中收集的循环
当你使用[0]语法时，你从内部集合中获取第一个元素。 此时您将获得一个DOM对象
关于速度差异的说明。 将下面的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)); }
交替评论一个，然后评论其他。 在我的testing中，document.getElementbyId平均约35ms（在15次运行中从25ms上升到52ms）。 另一方面，jQuery的平均时间约为200ms（约15次运行从181ms到222ms）。 从这个简单的testing中，你可以看到jQuery花了大约6倍的时间。
当然，这是超过10000次迭代，所以在一个更简单的情况下，我可能会使用jQuery的易用性和所有其他很酷的东西，如.animate和.fadeTo。 但是，是的，techinically getElementById是相当快一点。
如果有人打这个…这是另一个区别：
如果id包含HTML标准不支持的字符（参见这里的问题），那么即使getElementById，jQuery也可能找不到它。
这发生在我身上的一个包含“/”字符（如：ID =“A / B / C”），使用Chrome浏览器：
var contents = document.getElementById('a/b/c');
能够find我的元素，但是：
var contents = $('#a/b/c');
没有。
顺便说一句，简单的解决办法是将该ID移动到名称字段。 JQuery没有使用以下方法find元素：
var contents = $('.myclass[name='a/b/c']);
就像大多数人所说的，主要区别在于，它被包装在一个jQuery对象中，使用直接的JavaScript将jQuery调用与原始的DOM对象相关联。 jQuery对象当然也可以做其他的jQuery函数，但是如果你只需要做简单的DOM操作，比如基本的样式或者基本的事件处理，直接的JavaScript方法总比jQuery快一点，不得不加载外部的JavaScript代码库。 它节省了一个额外的步骤。
另一个区别是： getElementById返回第一个匹配，而$('#...')返回匹配集合 – 是的，同一个ID可以在HTML文档中重复。
此外， getElementId从文档中调用，而$('#...')可以从select器中调用。 因此，在下面的代码中， 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的select性可以帮助你。
var contents = document.getElementById('contents');
var contents = $('#contents');
代码片段不一样。 第一个返回一个Element对象（ source ）。 第二个，jQuery等价物将返回一个包含零个或一个DOM元素集合的jQuery对象。 （ 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] );
我开发了一个noSQL数据库，用于在Web浏览器中存储DOM树，其中页面上的所有DOM元素的引用都存储在一个短索引中。 因此函数“getElementById（）”不需要获取/修改一个元素。 当DOM树中的元素在页面上实例化时，数据库将代理主键分配给每个元素。 这是一个免费的工具http://js2dx.com
