文档。getElementById vs jQuery $()

是这样的:

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

和这个一样:

var contents = $('#contents');

jQuery加载?

708035 次浏览
小开

不。

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

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

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

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

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

小开
最佳答案

不完全是! !

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
小开

不，实际上结果是一样的:

$('#contents')[0]

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

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

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

小开

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

等价的是这个

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

或者这个

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

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

小开

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

由document.getElementById('contents')返回的DOM元素允许你做一些事情，比如改变.innerHTML(或.value)等，但是你需要在jQuery对象上使用jQuery方法。

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

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

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

小开

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

小开

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

如果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']);
小开

另一个区别是:getElementById返回第一个匹配，而$('#...')返回匹配的集合——是的，相同的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的选择性可以帮助您解决这个问题。

小开

# EYZ0

# EYZ0

代码片段不相同。第一个返回Element对象(源)。 第二个是jQuery等效函数，返回一个包含0个或1个DOM元素的集合的jQuery对象。(# EYZ1)。jQuery内部使用document.getElementById()来提高效率。< / p >

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

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

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

关于速度差异的注释。将以下代码片段附加到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平均约为35岁的女士(从25ms到52ms在15 runs上下波动)

另一方面，

jQuery平均大约200毫秒(从181ms到222ms，大约15 runs)。

从这个简单的测试中，您可以看到jQuery大约花费了6倍的时间。

当然，这是超过10000迭代，所以在一个更简单的情况下，我可能会使用jQuery的易用性和所有其他酷的东西，如.animate和.fadeTo。但是，从技术上讲，getElementById有点像快。

小开

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

. getelementbyid ()

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

Jquery(美元)

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

小开

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

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

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

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>
< p >在线演示! - # EYZ0 < / p >

提交答案