代码之家 › 专栏 › 技术社区 › Phillip Senn mpgn

document.getElementById与jQuery$()

jquery-selectors jquery javascript

551

Phillip Senn mpgn · 技术社区 · 14 年前

这是:

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

var contents = $('#contents');

假设jQuery已加载?

13 回复 | 直到 12 年前

980

John Hartsock 13 年前

不完全是!!

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

132

SLaks 14 年前

打电话 document.getElementById('id') 将返回一个原始的DOM对象。

$('#id') 将返回一个jQuery对象,该对象包装DOM对象并提供jQuery方法。

因此,您只能调用jQuery方法,如 css() 或 animate() $() 打电话来。

你也可以写 $(document.getElementById('id')) $('#id')

您可以通过编写 $('#id')[0]

RightSaidFred 14 年前

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

相当于这个

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

或者这个

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

Siddharth 7 年前

关于速度差异的说明。将以下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));
}

交替评论一个,然后评论另一个。在我的测试中,

35毫秒 (波动自 25ms 高达 52ms 关于 15 runs

另一方面

200毫秒 181ms 到 222ms 关于 15次跑步

从这个简单的测试可以看出jQuery 6次只要。

10000 迭代,所以在一个更简单的情况下,我可能会使用jQuery来获得易用性和所有其他的酷东西,比如 .animate 和 .fadeTo getElementById 有点更快

Matt user129975 14 年前

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

返回的DOM元素 document.getElementById('contents') .innerHTML .value )等等,但是你需要使用 jQuery methods 在jQuery对象上。

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

目录 是匹配的, document.getElementById('内容') 将返回空值,但是 $('#contents').get(0) 将返回未定义。

null 返回者 document.getElementById

John Hartsock 13 年前

不,实际上同样的结果是:

$('#contents')[0]

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

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

Community CDub 7 年前

万一有人打这个。。。还有一个区别:

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']);

John Hartsock 13 年前

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

Nipuna 10 年前

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

var contents = $('#contents');

代码片段不相同。第一个返回 Element 对象( source 第二个,jQuery等价物将返回一个jQuery对象,该对象包含一个0或一个DOM元素的集合。( jQuery documentation ). jQuery内部使用 document.getElementById()

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

在检查github项目的jQuery时,我发现以下行代码片段似乎在使用document.getElementById代码( https://github.com/jquery/jquery/blob/master/src/core/init.js

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

Leigh josh poley 11 年前

另一个区别是: getElementById 返回匹配,while $('#...') 返回匹配项的集合-是,同一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相同的id。jQuery的选择性可以帮助您实现这一点。

Hadi Mir 6 年前

document.getElementById()

Jquery$()

Gonki 8 年前

我开发了一个noSQL数据库,用于在Web浏览器中存储DOM树,其中对页面上所有DOM元素的引用都存储在一个短索引中。因此,获取/修改元素不需要函数“getElementById()”。当在页面上实例化DOM树中的元素时,数据库为每个元素分配代理主键。它是免费的工具 http://js2dx.com

Mazhar MIK 6 年前

以上所有答案都是正确的。如果你想看到它的实际效果,别忘了你在浏览器中有一个控制台,在那里你可以清楚地看到实际的结果:

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

frank-dspeed 5 年前

从2019年起,所有的答案都已经过时了,你可以直接用javascript访问id键控的文件,只要试试就行了

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

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