document.getElementById 与 jQuery $()

Posted 2023-03-05

【中文标题】document.getElementById 与 jQuery $()

【英文标题】：document.getElementById vs jQuery $()

【发布时间】：2011-05-03 11:15:16

【问题描述】：

这是：

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

同理：

var contents = $('#contents');

鉴于 jQuery 已加载？

【问题讨论】：

这在某处得到证实吗？

@torazaburo 实际上，jQuery 版本甚至没有慢 3 倍（至少在最新的 Chrome 中）。见：jsperf.com/getelementbyid-vs-jquery-id/44

@MichałPerłakowski 在该链接中，jquery 版本慢了 10 倍。 2600 万与 240 万

JSPerf 的正确更新链接是：jsperf.com/getelementbyid-vs-jquery-id 在我的情况下（FF 58）它慢了 1000 倍。无论如何，jQuery 仍然每秒执行 250 万次操作。一般来说，这不是问题，而且在功能方面肯定无法比较。

【参考方案1】：

不完全是！！

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.getElementBy 在 name 获取元素，因此理论上您可以争辩document.getElementById 不仅具有误导性，而且可能返回不正确的值。我认为@John 是新的，但我认为添加它不会有什么坏处。

如果您的标识符不固定，请小心。 $('#'+id)[0] 不等于 document.getElementById(id) 因为 id 可能包含在 jQuery 中被特殊处理的字符！

这很有帮助 - 从来不知道这个！不过，我确定我之前确实使用过它，这让我感到困惑。嘿，你每天都学到一些东西！谢谢！

google jquery equivalent of document.getelementbyid 第一个结果就是这篇文章。谢谢！！！

$('#contents')[0].id 返回 id 名称。

【参考方案2】：

没有。

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

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

因此，您只能在 $() 调用上调用像 css() 或 animate() 这样的 jQuery 方法。

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

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

【讨论】：

你是否知道哪个更快 - $(document.getElementById('element')) vs $('#element')？

@IvanIvković：第一个更快，因为它不涉及字符串解析。

@SLaks 原始 DOM 对象和 jQuery 对象之间的主要区别是什么？只是使用 jQuery 对象我们有能力应用 jQuery 方法？

@Roxy'Pro：它们是不同的对象。 jQuery 对象包装 DOM 对象。请参阅文档。

这个文档JavaScript DOM Objects vs. jQuery Objects 看起来很有用。 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.

【参考方案3】：

关闭，但不一样。他们得到相同的元素，但 jQuery 版本被包装在一个 jQuery 对象中。

相当于这个

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

或者这个

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

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

【参考方案4】：

关于速度差异的说明。将以下片段附加到 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 相当更快。

【讨论】：

感谢您的回答。我想问，我应该用document.getElementById("someID") 替换所有$('#someID') 吗？我正在做一些我广泛使用$('#someID') 的事情，并且我的页面对于大文件输入运行缓慢。请建议我应该采取什么行动。

如果您在同一范围内多次重复使用同一个变量，请保存它，如var $myId = $('#myId'); 并重复使用保存的变量$myId。不过，通过 id 查找通常是一件非常快的事情，因此如果页面缓慢，可能有不同的原因。

【参考方案5】：

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

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

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

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

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

【参考方案6】：

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

$('#contents')[0] 

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

让 jQuery 如此方便的部分原因在于，在这个对象上调用的大多数方法看起来像是为一个控件设计的，实际上是在一个循环中调用的所有成员在他的集合中

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

【参考方案7】：

万一其他人碰到这个......这是另一个区别：

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

这发生在我身上，其 id 包含“/”字符（例如：id="a/b/c"），使用 Chrome：

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

能够找到我的元素但是：

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

没有。

顺便说一句，简单的解决方法是将该 id 移动到 name 字段。 JQuery 使用以下命令可以轻松找到元素：

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

【参考方案8】：

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

【参考方案9】：

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

此外，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 的选择性可以帮助你。

【参考方案10】：

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

var contents = $('#contents');

sn-ps 的代码不一样。第一个返回 Element 对象 (source)。 第二个，jQuery 等效项将返回一个 jQuery 对象，其中包含零个或一个 DOM 元素的集合。 (jQuery documentation)。 jQuery 内部使用document.getElementById() 来提高效率。

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

---

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

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

【参考方案11】：

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

document.getElementById()

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

Jquery $()

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

【参考方案12】：

以上所有答案都是正确的。如果您想查看它的实际效果，请不要忘记您在浏览器中有控制台，您可以清楚地看到实际结果：

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

【参考方案13】：

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

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

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