JavaScript三大组成部分
1. ECMAScript
ECMAScript是JavaScript的语法标准，由ECMA（欧洲计算机厂家协会）制定的。
2. BOM
- BOM即浏览器对象模型（brower object model）。
- 没有统一标准。各个浏览器厂商根据 DOM在各自浏览器上实现。
- BOM由一系列相关的对象（包括window对象）构成，并且每个对象都提供了很多方法与属性。
- 主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。
3. DOM
- DOM即文档对象模型（document object model）。
- DOM的标准化组织是W3C。
- DOM 就是针对 HTML 和 XML 提供的一个应用程序接口（API）。换句话说就是能以编程的方式操作整个 HTML 的内容。（以下只谈论HTML，不谈论XML。但XML同理可得）。
- HTML 的内容是指HTML文件中的各种标签（比如html标签，body标签，a标签，div标签等）及其中包含的文本。我们利用DOM提供的API，对这些内容进行增删改查等操作。
- 在HTML文件中，把每个标签（及其包含文本）看作一个对象，每个这样的对象作为一个节点，这样的节点连接起来构成了一个“文档树形结构”。这样一个个的节点在被称为是HTML中的一个个元素(Element)。
- DOM提供的API帮助我们操作这个树形结构的文档。将HTML文件转化为DOM树的过程称为解析。转化为DOM树后，我们就可以利用DOM提供的API对HTML文件进行操作。
- 每个载入浏览器的 HTML 文档都会成为 Document 对象。由下图可以看出，document 是整个 DOM 树的根节点。
- Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
PS:
- 也有人称HTML文件为HTML文档。这里不做区分，感兴趣的可以自行探索区别
- html元素(element)的定义，看这里👇
https://www.w3school.com.cn/html/html_elements.asp- document的定义，看这里👇
https://www.w3school.com.cn/jsref/dom_obj_document.asp
小结
- window是BOM中的一个对象
- document是DOM中的一个对象，同时也是BOM中的一个对象
- DOM的对象document可以通过BOM的对象window来访问，即window.document。所以可以通过BOM访问DOM。
- 在DOM树中，html是documnet下的节点，而body又是html下面的节点。所以html和body是html文件中的具体内容。
- 可以不严谨地得到这样一个层级关系：window→document→html→body
细说BOM和DOM
1. BOM
BOM包含的对象有window(窗口)、navigator(浏览器)、screen(浏览器屏幕)、history(访问历史)、location(地址)等
- window对象（核心对象）
页面一旦加载，就会创建windows对象，无需自行创。通过该对象可以做的事情比如：
- 获取一些浏览器相关属性
window.innerWidth // 返回窗口的文档显示区的宽度
window.innerHeight // 返回窗口的文档显示区的高度
window.outerWidth // 在innerWidth的基础上加上工具栏/滚动条的宽
window.outerHeight // 在innerHeight的基础上加上工具栏/滚动条的高
- 一些浏览器操作
window.alert() // 弹出框
window.confirm() // 确认框
window.prompt() // 输入框
- 计时器
window.setTimeout()
window.setInterval()
window.clearInterval()
// 不要再setInterval调用的函数中使用document.write()
navigator对象
提供浏览器相关信息，包括浏览器名称、版本号、操作系统等。screen对象
提供用户屏幕相关信息。如宽（screen.width）history对象
记录访问历史。如返回上次访问地址（history.back）。location对象
浏览器中的地址栏，可以完成刷新当前页面与放回首页、显示端口号、服务器等信息。document对象
document对象是window对象的子对象(window.document)，同时也是DOM中的根节点对象。具体放在DOM中讨论。
2. DOM
DOM就是把html里的各种数据当做对象处理的一种思路。document对象是DOM树的根节点，通过document对象可以操作DOM树下的任意子节点。下面介绍几个DOM的常用操作。
- 获取节点
document.getElementById()
document.getElementByTagName()
document.getElementByClassName()
- 节点的创建、添加、删除
var ul = document.getElementByTagName("ul")[0];
var li = document.createElement("li");
li.innerHTML = "<span>我是新增的li</span>"
ul.appendChild(li);
ul.removeChild(li);
- 获得/设置节点的属性
var div = document.getElementByTagName("div")[0];
div.getAttribute("节点属性名称");
div.setAttribute("节点属性名称", 要设置成的值);
- 给节点添加/移除绑定事件
var div = document.getElementByTagName("div");
div.onclick = function(){};
div.onclick = null;
div.addeEventListener("click", function () {});
div.removeEventListener("click", function () {});
写在最后
参考资料：《BOM与DOM解释与分析》
https://blog.csdn.net/qq_41908550/article/details/83060780
参考资料：《DOM与document的区别》
https://www.cnblogs.com/lal520/p/9856337.html
参考资料：《dom和document有什么区别》
https://zhidao.baidu.com/question/625798628075034204.html
参考资料：《bom和dom区别》
https://www.cnblogs.com/cdufaker/p/9860317.html
