$\color{pink}❀DOM | 青训营笔记$

$\color{pink}这是我参与「第四届青训营」笔记创作活动的第4天$

$\color{pink}❀什么是DOM$

DOM（Document Object Model）即$\colorbox{pink}{文档对象模型}$，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。$\colorbox{pink}{将HTML或XML文档转化为DOM树的过程称为解析(parse)}$。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。

下面是详细的解释:
先了解几个关键字 元素（element）：文档中的所有标签都是元素，元素可以看成是对象
节点（node）：文档中所有的内容都是节点：标签，属性，文本
文档（document）：一个页面就是一个文档
这三者的关系是：文档包含节点，节点包含元素

$\color{pink}Document 文档$

什么是文档呢？一个页面就是一个文档，一个html文件或XML文件就是一个文档 html与Xml的区别： html 用来展示信息，展示数据的 xml 更侧重于存储数据

$\color{pink}Object 对象$

“万物皆对象” 把所有的事物都当作一个对象，html文件是一个对象，html文件中的标签也是对象

$\color{pink}Model 模型$

文档（页面）中有一个根（root），这个根标签包含head标签与body标签，head标签中又包含meta与title标签，body标签中包含div、p、header、main等等标签，其中main下面又有article、aside等等标签，article标签中又有其它的标签等等，这就组成了树状结构图，也叫DOM树。这就形成了一个模型。看下图的关系。

$\color{pink}Node 节点$

Node节点包含了标签、属性、文本等，定义了结点对象的行为，就是利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。

$\color{pink}DOM的作用$

为了让JavaScript可以对文档中的标签、属性、内容等进行 访增删改 操作。
举几个简单的例子：

html内容

<div>我是div元素</div>
<p id="p">我是p元素</p>

访

var div = document.getElementsByTagName('div')
var p = document.getElementById('p')

增

// 创建一个a元素
var a = document.createElement('a')
// 添加到body
document.body.append(a)

删

// 移除body中的div子节点
document.body.removeChild(div)

改

div.innerHTML = '我修改了div的文本内容'