简而言之,DOM 对象是 Web 浏览器用来在网页上呈现元素的对象,而 jQuery 对象基本上是围绕一组 DOM 元素的包装对象。如果您想详细了解这些对象以及如何使用它们以及如何相互转换,请继续阅读本教程。
如前所述,浏览器直接使用 DOM 对象在浏览器窗口中呈现网页。浏览器从 Web 服务器接收 HTML 文档,它只是文本。浏览器继续将此文本解析为内部结构,它实际上可以用来可视化地呈现页面。 DOM 表示浏览器具有的 HTML 文档的内部结构。 DOM 对象表示页面上从原始 HTML 文档创建的视觉或功能对象。
即使浏览器已完全呈现网页,您也可以使用 JavaScript 更改 DOM 对象,它是 属性和值。以这种方式进行的任何更改都会自动刷新浏览器窗口中显示的视觉表示。
使用 DOM 对象的优势是您可以直接访问操作 HTML 元素所需的一切。 DOM 对象的缺点 是大多数附加函数和属性都是浏览器需要的东西,在您使用 JavaScript 时不一定有用。这使得使用它们的速度变慢了一点,至少对于经验不足的开发人员来说是这样。
例如要更改段落或标签的内容,您可以像这样使用 javascript:
document.getElementById("label_firstname").innerHTML = "First Name";
jQuery 对象是围绕单个或多个 DOM 元素的包装器对象。 jQuery 对象(尽管在技术上仍然是 JavaScript 对象)提供对包装的 DOM 元素的访问——但是,以一种非常不同、更容易且通常更有效的方式。
使用 jquery 对象有它自己的优势。例如,jQuery 提供了很多有用的库方法 在它所代表的 DOM 元素内部搜索元素,并对搜索到的元素执行批量操作,而无需在代码中迭代它们。
例如要更改段落或标签的内容,您可以像这样使用 jQuery:
("#label_firstname").html("First Name");
很多时候,在处理任何复杂的应用程序时,您可能会发现 jQuery 对象和 javascript DOM 对象都在一段代码中。现在您不确定它是 jQuery 对象、DOM 对象还是其他一些 JavaScript 对象。有一种简单的方法可以区分它们。
要确认一个对象是否是jQuery对象,看对象是否有jquery
属性:
if( obj.jquery ) { //other operation }
类似地,要确认一个对象是否是DOM对象,看对象是否有nodeType
属性:
if( obj.nodeType ) { //other operation }
在上述情况下,如果您想将对象从 DOM 转换为 jQuery 或将 jQuery 转换为 DOM,您可以使用以下技术来完成。
$()
或 jquery()
方法从 DOM 对象创建一个新的 jQuery 对象。
var jqueryObj = $(domObj);
.get()
方法返回包裹在 jQuery 对象中的 DOM 对象。
var domObj = jqueryObj.get();
这就是关于 javascript DOM 对象和 jQuery 对象的全部内容。如果有任何问题或建议,请给我留言。
快乐学习!!
地址:https://www.cundage.com/article/javascript-dom-objects-vs-jquery-objects.html