从零开始学习DOM-BOM（三）终结篇
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情
接上篇：
前言
前两篇展开介绍了BOM和DOM的知识，相信大家有了一个基本的认识
今天我们总结一下DOM和BOM，帮助大家建立一个基本的知识体系
图解DOM/BOM架构
JavaScript运行在浏览器
BOM就是连接JavaScript代码和浏览器的桥梁，而DOM就是用来操作各种标签元素的。
BOM包括 window、history、location、document ...
DOM包括 Document（整个文档）、Element（标签元素）、CharacterData（字符数据）、Attr（属性），这些元素又可以继续往下划分。
DOM 名词解释和理解
Document 又可以分为HTMLDocument（就是我们定义的html文件）和XMLDocument(XML文件，安卓会用，前端用不到)
Element 可以划分为 HTMLElement（表示 HTML 中的一个元素，比如div），HTMLElement又可以划分为HTMLDIvElement 和 HTMLImageElement 故名思义
CharacterData 可以划分为text(text标签)和Comment(注释)
Attr 可以理解我们元素的class属性id属性以及值
继承关系
从上图可以看出
其中window 对象继承自EventTarget接口，所以window上是可以绑定事件，监听事件，分发事件的
其中DOM 中的所有元素节点都继承自EventTarget接口，所以DOM中任意节点可以绑定事件，监听事件，分发事件
验证继承关系
如何验证这一继承结构呢，我们可以在浏览器中打印它的原型属性
通过下图我们可以看出，window继承Window，Window继承自EventTarget
通过下图我们可以看出，document继承HtmlDocument，HtmlDocument继承自Document,Document继承自Node节点，Node节点继承自EventTarget
顺便说一句：EventTarget继承自Object,Object继承自null
dom树形结构图
为了大家更好地理解，下面演示-段HTML代码以及其对应的DOM树形结构图，如下所示。
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<h1>标题</h1>
<ul>
<1i>
<a href="#">链接</a>
</1i>
</ul>
</body>
</html>上述代码中，层层嵌套的HTML标签就是一个类似树形的DOM文档。
其中，最外面的一层是标签，标签中嵌套着标签和标签，而这两个标签中也会嵌套其他标签.
对应上述HTML代码的DOM树形结构如下图所示。
上图中就包括DOM的主要节点
Document文档节点
表示整个 HTML 页面(相当于 document 对象)
当需要访问任何标签、属性或文本时，都可以通过文档节点进行导航
Element元素节点 ul h1 li
表示 HTML 页面中的标签(即 HTML 页面的结构)
当访问 DOM 树时，需要从查找元素节点开始
Attr 属性节点 href
表示 HTML 页面中的开始标签包含的属性
Text 文本节点 比如title的内容
总结
这篇是对前两篇的一个汇总，对于dom和bom的学习，我所秉持的观点依然是，抓大放小，建立知识体系，常用的api可以了解，不常用的api知道去哪里查就好，因为比较我们也接触不到太底层的代码。
之后，我会继续努力，把三篇内容汇总成一篇，方便大家更好的去学习理解。
附上放上三篇内容链接：
最后，这是我第一次参加更文活动，茫茫人海中，如果有幸遇到你，读到我这篇文章，那真是太好了。我深知还有很多不足，希望大家能多提建议，还是想舔着脸皮，向屏幕前的大帅比们，大漂亮们，恳请一个小小的点赞，这会是对我莫大鼓励。也祝愿点赞的大帅比们，大漂亮们升职加薪走向人生巅峰！