document.getElementById vs jQuery $（）

最新推荐文章于 2022-11-11 09:36:03 发布

asdfgh0077

最新推荐文章于 2022-11-11 09:36:03 发布

阅读量546

点赞数

文章标签： javascript jquery jquery-selectors

原文链接：https://oldbug.net/q/H4ms/document-getElementById-vs-jQuery

版权

本文翻译自：document.getElementById vs jQuery $()

Is this: 这是：

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

The same as this: 与此相同：

var contents = $('#contents');

Given that jQuery is loaded? 鉴于jQuery已加载？

#1楼

参考：https://stackoom.com/question/H4ms/document-getElementById-vs-jQuery

#2楼

In case someone else hits this... Here's another difference: 如果其他人遇到这个...这是另一个区别：

If the id contains characters that are not supported by the HTML standard (see SO question here ) then jQuery may not find it even if getElementById does. 如果id包含HTML标准不支持的字符（请参阅此处的 SO问题），那么即使getElementById，jQuery也可能找不到它。

This happened to me with an id containing "/" characters (ex: id="a/b/c"), using Chrome: 使用Chrome时，我发现我的ID包含“/”字符（例如：id =“a / b / c”）：

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

was able to find my element but: 能够找到我的元素但是：

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

did not. 没有。

Btw, the simple fix was to move that id to the name field. 顺便说一句，简单的解决方法是将id移动到name字段。 JQuery had no trouble finding the element using: JQuery使用以下方法找到元素没有问题：

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

#3楼

One other difference: getElementById returns the first match, while $('#...') returns a collection of matches - yes, the same ID can be repeated in an HTML doc. 另一个区别是： getElementById返回第一个匹配，而$('#...')返回匹配集合 - 是的，可以在HTML文档中重复相同的ID。

Further, getElementId is called from the document, while $('#...') can be called from a selector. 此外，从文档中调用getElementId ，而可以从选择器调用$('#...') 。 So, in the code below, document.getElementById('content') will return the entire body but $('form #content')[0] will return inside of the form. 因此，在下面的代码中， document.getElementById('content')将返回整个正文，但$('form #content')[0]将返回表单内部。

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

It might seem odd to use duplicate IDs, but if you are using something like Wordpress, a template or plugin might use the same id as you use in the content. 使用重复的ID可能看起来很奇怪，但如果您使用的是Wordpress，模板或插件可能会使用与您在内容中使用的ID相同的ID。 The selectivity of jQuery could help you out there. jQuery的选择性可以帮助你。

#4楼

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

var contents = $('#contents');

The code snippets are not the same. 代码片段不一样。 first one returns a Element object ( source ). 第一个返回一个Element对象（源）。 The second one, jQuery equivalent will return a jQuery object containing a collection of either zero or one DOM element. 第二个，jQuery等价物将返回一个包含零个或一个DOM元素集合的jQuery对象。 ( jQuery documentation ). （ jQuery文档）。 Internally jQuery uses document.getElementById() for efficiency. 在内部，jQuery使用document.getElementById()来提高效率。

In both the cases if more than one element found only the first element will be returned. 在这两种情况下，如果找到多个元素，则只返回第一个元素。

When checking the github project for jQuery I found following line snippets which seems to be using document.getElementById codes ( https://github.com/jquery/jquery/blob/master/src/core/init.js line 68 onwards) 当检查github项目的jQuery时，我发现以下行代码片段似乎使用了document.getElementById代码（ https://github.com/jquery/jquery/blob/master/src/core/init.js第68行）

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

#5楼

A note on the difference in speed. 关于速度差异的说明。 Attach the following snipet to an onclick call: 将以下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));
}

Alternate commenting one out and then comment the other out. 替代评论一个，然后评论另一个。 In my tests, 在我的测试中，

document.getElementbyId averaged about 35ms (fluctuating from 25ms up to 52ms on about 15 runs ) document.getElementbyId平均大约35ms （在大约15 runs从25ms到52ms波动）

On the other hand, the 另一方面，

jQuery averaged about 200ms (ranging from 181ms to 222ms on about 15 runs ). jQuery平均大约200ms （大约15 runs从181ms到222ms ）。

From this simple test you can see that the jQuery took about 6 times as long. 从这个简单的测试中你可以看到jQuery花了大约6倍的时间。

Of course, that is over 10000 iterations so in a simpler situation I would probably use the jQuery for ease of use and all of the other cool things like .animate and .fadeTo . 当然，这是超过10000次迭代，因此在更简单的情况下，我可能会使用jQuery易用性和所有其他很酷的东西，如.animate和.fadeTo 。 But yes, technically getElementById is quite a bit faster . 但是，从技术上讲， getElementById要快得多 。

#6楼

I developed a noSQL database for storing DOM trees in Web Browsers where references to all DOM elements on page are stored in a short index. 我开发了一个用于在Web浏览器中存储DOM树的noSQL数据库，其中对页面上所有DOM元素的引用存储在一个短索引中。 Thus function "getElementById()" is not needed to get/modify an element. 因此，获取/修改元素不需要函数“getElementById（）”。 When elements in DOM tree are instantiated on page the database assigns surrogate primary keys to each element. 当DOM树中的元素在页面上实例化时，数据库会为每个元素分配代理主键。 It is a free tool http://js2dx.com 它是一个免费的工具http://js2dx.com

asdfgh0077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document.getElementById vs jQuery $（）

Is this: 这是： var contents = document.getElementById('contents'); The same as this: 与此相同： var co
复制链接

扫一扫