# JavaScript DOM 对象与 jQuery 对象

> 原文： [https://howtodoinjava.com/jquery/javascript-dom-objects-vs-jquery-objects/](https://howtodoinjava.com/jquery/javascript-dom-objects-vs-jquery-objects/)

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

```java
Table of Contents

What are JavaScript DOM objects?
What are jQuery objects?
How to determine Whether an Object is DOM or jQuery?
Convert an Object from DOM to jQuery and back
```

## 什么是 JavaScript DOM 对象？

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

即使浏览器完全渲染了网页，您也可以使用 JavaScript 更改 DOM 对象， [**属性**](https://www.w3schools.com/jsref/dom_obj_all.asp)和值。 以这种方式进行的任何更改都会自动刷新浏览器窗口中显示的视觉表示。

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

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

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

## 什么是 jQuery 对象？

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

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

使用 jquery 对象有其自身的优势。 例如，jQuery 提供了许多有用的[**库方法**](https://api.jquery.com/category/manipulation/)来搜索它所表示的 DOM 元素内的元素，并对所搜索的元素执行批量操作，而无需在代码中对其进行迭代。

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

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

## 如何确定对象是 DOM 还是 jQuery？

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

要**确认对象是否为 jQuery 对象**，请查看该对象是否具有`jquery`属性：

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

类似地，要确认**对象是否为 DOM 对象**，请查看该对象是否具有`nodeType`属性：

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

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

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

#### 将 DOM 对象转换为 jQuery 对象

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

```java
var jqueryObj = $(domObj);
```

#### 将 jQuery 对象转换为 DOM 对象

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

```java
var domObj = jqueryObj.get();
```

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

学习愉快！