JavaScript中DOM

灰太狼 2024-02-19 00:38 51阅读 0赞

## 1.回顾 ##

在说JavaScript之前，我们先来回顾一下JavaScript ，html，css的区别。  
html：用来显示内容。  
css：用来设置页面显示内容的样式，比如颜色等。  
JavaScript：用来触发页面上的各种事件，比如，点击按钮事件，图片自动切换事件等。  
　　那么，JavaScript是如何控制这些事件呢，主要就是靠DOM和BOM。下面我们来了解一下什么是BOM和DOM。  
我们都知道javas主要分为三个部分，如下图。  
![在这里插入图片描述][70]  
　　  
ECMAScript标准：js的基本语法。这个对于页面的操作没有任何的做用。  
DOM：document object model——》文档对象模型——用来操作页面的元素。  
BOM：browser object model ——》浏览器对象模型——用来操作浏览器对象。

了解了这些，那我们接下来就看看什么是DOM吧。

## ２.简介： ##

DOM 是文档对象模型，我们先来了解一下什么是文档。个人感觉直接看官方的简介非常的难懂，应该是我对水平有待提高吧。

### ２.１文档： ###

一个html页面文件就是一个文档，由于万物都是对象。所以把这个文档页看做对象。  
另外，xml文件也是一个文件。  
　　xml与html文件的区别：  
　　　xml中元素可以自定义。侧重于数据存储。  
　　　html中元素有系统提供。侧重于内容显示。

### 2．2理解：html 文件和标签、节点的关系？ ###

*  Html 文件看成一个对象，那么这个文档就可以看成一个对象，文档中的每一个的标签也可以看成一个对象。
 *  页面中的每个标签，都是一个元素（element），每个元素都可以看成一个对象。
 *  标签可以嵌套，标签中有标签，元素中有元素。
 *  页面中所有的标签都是元素，元素也可以看成对象。
 *  节点（node）：页面中所有的内容都是节点。包括：标签，属性，文档。

### 2．３总结： ###

为此，我就可以理解为DOM就是人家定义好的一种操作html文档中各个对象的标准，只要按照这个标准，咱们就可以在html文档中为所欲为了。

## 3树状图： ##

文档以及文档中的所以的元素（标签）组成的一个树形结构图，叫做树状图。  
正如下图所示，这就是DOM的树状图。那么这个图为什么这么画呢。

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

大家都知道，我们新建一个html文档，结构如下图。  
html页面都有一个跟标签—— 也可以叫做根元素。  
页面中有一个根元素（也叫标签——html），根元素里面有很多的元素。  
![在这里插入图片描述][70 2]

那么根元素中包括了和标签。  
![在这里插入图片描述][70 3]  
另外，这个两个标签中又可以包含如下的标签。  
![在这里插入图片描述][70 4]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/49411113abf843109849a39d428aec88.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9aab47dabd6b47239b9805cb93178183.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7621ab86fc1342978ecbecefc9217491.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a2c6f4e07c9542748b3d425ea4164756.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/02dba854ed094df598aee2473340985b.png