JavaScript DOM对象与jQuery对象

用一句话,DOM对象是Web浏览器用来在网页上呈现元素的对象,而jQuery对象基本上是围绕一组DOM元素的包装对象。如果您想详细了解这些对象以及如何使用它们,并相互转换,然后继续阅读本教程。

目录

什么是JavaScript DOM对象?
什么是jQuery对象?
如何确定对象是DOM还是jQuery?
将对象从DOM转换为jQuery并返回

什么是JavaScript DOM对象?

如前所述,浏览器直接使用DOM对象在浏览器窗口中呈现网页。浏览器从Web服务器接收HTML文档,它只是文本。浏览器继续将此文本解析为一个内部结构,该结构实际​​上可以用来可视化呈现页面。DOM表示浏览器具有HTML文档的内部结构。甲DOM对象表示这是从原始HTML文档创建的页面上的可视或功能对象

即使浏览器完全渲染了网页,您也可以使用JavaScript更改DOM对象,其属性和值。以这种方式进行的任何更改都会自动刷新浏览器窗口中显示的视觉表示。

使用DOM对象优点是,您可以直接访问操作HTML元素所需的所有内容。DOM对象缺点在于,大多数附加的函数和属性都是浏览器需要的,并且在使用JavaScript时不一定有用。至少对于经验不足的开发人员而言,这会使与他们的合作变慢一些。

例如,要更改段落或标签的内容,可以使用如下所示的javascript:

document.getElementById("label_firstname").innerHTML = "First Name";

什么是jQuery对象?

jQuery对象是围绕单个或多个DOM元素的包装对象。jQuery对象(尽管从技术上讲还是JavaScript对象)提供对包装的DOM元素的访问-但是,这是一种非常不同,更容易且通常更有效的方式。

请记住,jQuery对象可以表示单个DOM对象,也可以表示许多DOM对象的集合。因此,如果将操作应用于jQuery对象,则该操作可能适用于许多DOM对象。

使用jquery对象有其自身的优势。例如,jQuery提供了许多有用的库方法来搜索其表示的DOM元素内的元素,并对搜索到的元素执行批量操作,而无需在代码中对其进行迭代。

例如,要更改段落或标签的内容,可以使用jQuery,如下所示:

("#label_firstname").html("First Name");

如何确定对象是DOM还是jQuery?

很多时候,在任何复杂的应用程序上工作时,您都可以在单个代码中找到jQuery对象和javascript DOM对象。现在您不确定是jQuery对象,DOM对象还是其他JavaScript对象。有一个简单的方法可以分辨出差异。

确认对象是否为jQuery对象,请查看该对象是否具有jquery属性:

if( obj.jquery ) {
	//other operation
}

类似地,要确认对象是否为DOM对象,请查看该对象是否具有以下nodeType属性:

if( obj.nodeType ) {
	//other operation
}

将对象从DOM转换为jQuery并返回

在上述情况下,如果要将对象从DOM转换为jQuery或将jQuery转换为DOM,可以使用以下技术来实现。

将DOM对象转换为jQuery对象

$()jquery()方法从DOM对象创建一个新的jQuery对象。

var jqueryObj = $(domObj);

将jQuery对象转换为DOM对象

.get()方法返回包装在jQuery对象中的DOM对象。

var domObj = jqueryObj.get();

这就是关于javascript DOM对象和jQuery对象的全部内容。如果有任何问题或建议,请留下我评论。

学习愉快!

saigon has written 1440 articles

Leave a Reply