面试题：document.getElementById(‘idName’)与 $('#idName')的区别

最新推荐文章于 2022-11-15 10:41:22 发布

转载最新推荐文章于 2022-11-15 10:41:22 发布 · 493 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cd51cd55188253f69045ddd

文章标签：

#javascript #ViewUI

本文深入探讨了DOM对象与jQuery对象之间的联系与区别，详细解释了如何在JavaScript中使用document.getElementById与jQuery的$('#idName')选择元素，并展示了两者在属性与方法上的差异，包括向元素添加或删除class的操作。

document.getElementById(‘idName’)与 $('#idName')的区别

问

<div id=xxx></div>
-----------------------------
var div = document.getElementById('xxx');
var $div = $('#xxx');
复制代码

请说出div与$div的联系和区别？

答

首先，div是一个DOM对象，$div则是一个jQuery对象，而jQuery的本质就是一个JavaScript函数。可以使用typeof jQuery或是typeof $查看返回值，返回值为'function'。其实，jQuery就是将一些常用的(反人类的)DOM API进行封装，方便我们调用，所以jQuery对象其实就是通过jQuery包装DOM对象后产生的对象。我们可以使用$div[0]或者是$div.get(0)将jQuery转换为DOM对象；当然也可以将DOM对象转换为jQuery对象：$(div)。相比于DOM API,jQuery提供的属性与方法更加人性化，如向元素添加,删除class。DOM API提供的方法为：

div.classList.add();
div.classList.remove();
复制代码

而jQuery则是这样：

$div.addClass();
$div.removeClass();
复制代码

并且jQuery支持链式操作如：


$div.removeClass('green').addClass('red')
复制代码

jQuery不仅仅有对DOM操作的支持，而且还有动画，AJAX等模块，且兼容性也很好。但是了解了jQuery的本质后，我们知道jQuery能做的事情，JS也能做，但是JS能做的事情，jQuery则不一定能做。