document.getElementById与jQuery $()

2020/09/23 02:41 · javascript ·  · 0评论

这是:

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

与此相同:

var contents = $('#contents');

鉴于jQuery已加载?

不完全是!!

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

在jQuery中,要获得与相同的结果document.getElementById,可以访问jQuery Object并获取该对象中的第一个元素(请记住JavaScript对象的行为类似于关联数组)。

var contents = $('#contents')[0]; //returns a HTML DOM Object

没有。

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

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

因此,你只能调用jQuery方法一样css()animate()$()通话。

您还可以编写$(document.getElementById('id')),它将返回一个jQuery对象,它等效于$('#id')

您可以通过编写从jQuery对象获得基础DOM对象$('#id')[0]

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

等效的是这个

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

或这个

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

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

关于速度差异的注释。将以下代码片段附加到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毫秒(从181ms222ms大约不等15 runs)。

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

当然,这是在10000迭代中完成的,因此在更简单的情况下,我可能会使用jQuery来简化易用性,并使用所有其他很酷的功能(例如.animate和).fadeTo但是,是的,从技术上讲getElementById快得多

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

返回的DOM元素document.getElementById('contents')允许您执行诸如更改.innerHTML(或.value)等操作,但是您需要在jQuery Object上使用jQuery方法

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

比较对等,但是,如果没有contents匹配ID为的元素document.getElementById('contents')则将返回null,但$('#contents').get(0)将返回undefined。

使用jQuery对象的一个​​好处是,如果不返回任何元素,则不会出现任何错误,因为始终会返回一个对象。但是,如果您尝试对null返回的进行操作,则会收到错误消息document.getElementById

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

$('#contents')[0] 

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

使jQuery如此方便的部分原因在于,在此对象上调用的MOST方法看起来像是为一个控件所用,实际上是在对其集合中的所有成员进行调用的循环中

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

万一有人碰到这个……这是另一个区别:

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

这是使用Chrome浏览器通过一个包含“ /”字符(例如:id =“ a / b / c”)的ID发生的:

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

能够找到我的元素,但是:

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

没有。

顺便说一句,简单的解决方法是将该ID移到名称字段。jQuery可以轻松找到使用以下元素的元素:

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

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

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

var contents = $('#contents');

代码段不相同。第一个返回一个Element对象(source)。第二个,等效的jQuery将返回一个jQuery对象,其中包含零个或一个DOM元素的集合。jQuery文档)。jQuery内部document.getElementById()用于提高效率。

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


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

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

另一个不同点:getElementById返回第一个匹配项,而$('#...')返回一个匹配项集合-是的,可以在HTML文档中重复相同的ID。

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

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

document.getElementById()

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

jQuery $()

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

截至2019年,所有答案今天都是陈旧的,您可以直接在javascript中直接访问id键控filds

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

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

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

以上所有答案都是正确的。万一您希望看到它的实际效果,请不要忘记在浏览器中安装了Console,在其中您可以清楚地看到实际结果:

我有一个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
本文地址:http://javascript.askforanswer.com/document-getelementbyidyujquery.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!