JavaScript三大组成部分

1. ECMAScript

ECMAScript是JavaScript的语法标准，由ECMA（欧洲计算机厂家协会）制定的。

2. BOM

1. BOM即浏览器对象模型（brower object model）。
2. 没有统一标准。各个浏览器厂商根据 DOM在各自浏览器上实现。
3. BOM由一系列相关的对象（包括window对象）构成，并且每个对象都提供了很多方法与属性。
4. 主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。

3. DOM

1. DOM即文档对象模型（document object model）。
2. DOM的标准化组织是W3C。
3. DOM 就是针对 HTML 和 XML 提供的一个应用程序接口（API）。换句话说就是能以编程的方式操作整个 HTML 的内容。（以下只谈论HTML，不谈论XML。但XML同理可得）。
4. HTML 的内容是指HTML文件中的各种标签（比如html标签，body标签，a标签，div标签等）及其中包含的文本。我们利用DOM提供的API，对这些内容进行增删改查等操作。
5. 在HTML文件中，把每个标签（及其包含文本）看作一个对象，每个这样的对象作为一个节点，这样的节点连接起来构成了一个“文档树形结构”。这样一个个的节点在被称为是HTML中的一个个元素(Element)。
6. DOM提供的API帮助我们操作这个树形结构的文档。将HTML文件转化为DOM树的过程称为解析。转化为DOM树后，我们就可以利用DOM提供的API对HTML文件进行操作。
7. 每个载入浏览器的 HTML 文档都会成为 Document 对象。由下图可以看出，document 是整个 DOM 树的根节点。
8. Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

DOM树结构

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

小结

图片来自互联网

1. window是BOM中的一个对象
2. document是DOM中的一个对象，同时也是BOM中的一个对象
3. DOM的对象document可以通过BOM的对象window来访问，即window.document。所以可以通过BOM访问DOM。
4. 在DOM树中，html是documnet下的节点，而body又是html下面的节点。所以html和body是html文件中的具体内容。
5. 可以不严谨地得到这样一个层级关系：window→document→html→body

细说BOM和DOM

1. BOM

BOM包含的对象有window(窗口)、navigator(浏览器)、screen(浏览器屏幕)、history(访问历史)、location(地址)等

1. 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()

2. navigator对象
   提供浏览器相关信息，包括浏览器名称、版本号、操作系统等。

3. screen对象
   提供用户屏幕相关信息。如宽（screen.width）

4. history对象
   记录访问历史。如返回上次访问地址（history.back）。

5. location对象
   浏览器中的地址栏，可以完成刷新当前页面与放回首页、显示端口号、服务器等信息。

6. document对象
   document对象是window对象的子对象(window.document)，同时也是DOM中的根节点对象。具体放在DOM中讨论。

2. DOM

DOM就是把html里的各种数据当做对象处理的一种思路。document对象是DOM树的根节点，通过document对象可以操作DOM树下的任意子节点。下面介绍几个DOM的常用操作。

1. 获取节点

document.getElementById()
document.getElementByTagName()
document.getElementByClassName()

2. 节点的创建、添加、删除

var ul = document.getElementByTagName("ul")[0];
var li = document.createElement("li");
li.innerHTML = "<span>我是新增的li</span>"
ul.appendChild(li);
ul.removeChild(li);

3. 获得/设置节点的属性

var div = document.getElementByTagName("div")[0];
div.getAttribute("节点属性名称");
div.setAttribute("节点属性名称", 要设置成的值);

4. 给节点添加/移除绑定事件

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