JavaScript对象、DOM对象、jQuery对象三者的关系和转换

拼搏现实的明天。 2023-02-14 02:17 6阅读 0赞

### 文章目录 ###

*   *  基本概念
     *  转换
     *  Code

## 基本概念 ##

*  JS和DOM  
    首先要明确一点：`DOM对象就是JavaScript对象`。

DOM(Document Object Model)文档对象模型，他是HTML和XML文档的编程接口。JS操作HTML文档，就是靠中间的介质：文档对象模型。DOM对象的类就是一些**比较特殊、使用频率较低、用于模拟HTML文档结构**的JS类。

jQuery是JS的一个库，其本质就是：`window.$`这个变量。

JS对象，形如：`var arr = ["hello", 222, true];` 中的`arr`。  
DOM对象，是用DOM API获取的，如`var paragraph = window.document.getElementById("myPara");` 中的`paragraph`。  
[更多DOM API][DOM API]。

那么，关于他们之间类型的转换，**只有两个方向**：  
JS对象 <=> jQuery对象。

## 转换 ##

1.  首先，初始化一个JS数组。  
    `var arr = ["hello", 222, true];`
2.  JS对象arr转换为jQuery对象  
    用`$()`包围对象名即可。  
    `var jqueryOBj = ${arr}`

3.jQuery对象转换为JS对象。  
两种方式。

var jsOBj = jQueryObj[0];
    // 或
    var jsOBj = jQueryObj.get(0);

其中`0`为下标数，可为任意合法的值。

1.  至于DOM对象，把他当做JS对象去操作就好了。

## Code ##

arr = ["hello", 222, true]; // 得到JS对象: arr
    (3) ["hello", 222, true]
    jqObj = window.$(arr);      // JS对象转jQuery对象(前提是已经定义过jQuery对象 window.$)
    init(3) ["hello", 222, true]
    
    
    jqObj[0]
    "hello"
    jqObj.get(1)
    222

运行如图(注意`要在有jQuery对象定义的环境下运行`，如：CSDN的网站就用到了jQuery，所以可以直接F12在Console中用`$`或`window.$`获取jQuery对象)：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]

[DOM API]: https://www.runoob.com/htmldom/htmldom-methods.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200531084042892.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70#pic_center