关于速度差异的注释。将以下代码片段附加到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));
}

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

文档。getElementbyId平均约为35ms(在大约15次运行时，从25ms到52ms波动)

另一方面，

jQuery平均大约200ms(在大约15次运行中，范围从181ms到222ms)。 从这个简单的测试中，您可以看到jQuery花费了大约6倍的时间。

当然，这是超过10000次迭代，所以在一个更简单的情况下，我可能会使用jQuery，以方便使用和所有其他很酷的东西，如.animate和. fadeto。但是是的，技术上getElementById要快得多。

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

等价的是这个

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

或者这个

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

这将把元素从jQuery对象中拉出来。

以防别人撞到…这是另一个不同之处:

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

这发生在我的id包含“/”字符(例如:id=“a/b/c”)，使用Chrome:

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

能找到我的元素，但是

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

没有。

顺便说一句，简单的修复是移动id到名称字段。JQuery使用以下方法轻松找到元素:

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

以上所有答案都是正确的。如果你想看到它的运行，不要忘记你在浏览器中有控制台，在那里你可以清楚地看到实际的结果:

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

Just like most people have said, the main difference is the fact that it is wrapped in a jQuery object with the jQuery call vs the raw DOM object using straight JavaScript. The jQuery object will be able to do other jQuery functions with it of course but, if you just need to do simple DOM manipulation like basic styling or basic event handling, the straight JavaScript method is always a tad bit faster than jQuery since you don't have to load in an external library of code built on JavaScript. It saves an extra step.

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

Var contents = $('#contents');

代码片段是不一样的。第一个返回一个Element对象(source)。 第二个是jQuery等效函数，返回一个包含0个或1个DOM元素的集合的jQuery对象。(jQuery文档)。jQuery内部使用document.getElementById()来提高效率。

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

当检查github项目的jQuery时，我发现下面的行片段似乎正在使用文档。getElementById代码(https://github.com/jquery/jquery/blob/master/src/core/init.js第68行起)

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