前言
本文是个人学习笔记，可能存在错误和遗漏，请大家辩证看待。
如果发现有明显错误的地方，欢迎评论区交流指正💪我们一起学习
DOM概念
首先来看看官方文档对于DOM的定义： DOM（Document Object Model 文档对象模型）是文档内容（HTML或XML）在编程语言上的抽象模型，DOM建模了文档的内容和结构，并提供给编程语言一套完整的操作文档API
听完后是不是感到云里雾里😵，没有关系，接下来我们把这段官方术语翻译成人话
我们先来了解为什么需要DOM： 首先HTML(超文本标记语言)的本质是一段很长的字符串，在这段字符串中，有的字符去定义各个标签和属性。如果没有DOM的话，我们要修改HTML上的元素，就只能去操作这段很长的字符串，用字符串自带的方法定位到特定标签，然后修改特定区域的字符。这想想就很头疼。
而且就算你的字符串操作到了炉火纯青的地步，成功修改了元素的内容，对于浏览器来说，由于没有DOM，不知道你修改了哪个地方，那么浏览器只好重新解析、绘制整个页面，在这期间必然会白屏，用户很生气，说你这个网页怎么动不动就白了呀(╯▔皿▔)╯
所以我们需要一种技术，这种技术可以让我们简单高效的修改HTML上的元素，同时让浏览器也能知道我们修改的是哪一个元素，然后针对修改的元素再进行解析、重绘。而这项技术就是DOM。
通过DOM技术，浏览器在首次解析HTML页面时，会将HTML中各个标签和文本解析成一个个的节点，然后通过父子关系将这一个个节点连接起来，形成叫做DOM树的树状结构。
那有了DOM树就好办多了呀，我们只需要通过js选择 特定标签对应的DOM节点，然后操作节点就好了，开发者win。
浏览器通过DOM树，知道了我们修改的是哪一个标签，然后只需重绘这个标签对应的局部页面就好啦，浏览器说它也win了。
因此我们可以对DOM给出更加简单的定义：
简单定义
DOM：DOM是一套规范，提供了一套完整的访问和修改文档的接口，这些接口在浏览器中使用
DOM节点：根据DOM规范，将HTML中各个标签解析成的对象，叫做DOM节点
DOM树：根据DOM规范，将DOM节点通过父子关系连接起来形成的树状结构叫做DOM树
