JavaScript—DOM、BOM、虚拟DOM

Javascript组成

1. ECMAScript（核心）：js的语法和基本对象
2. DOM （文档对象模型）：处理网页内容的方法和接口
3. BOM（浏览器对象模型）：与浏览器交互的方法和接口

DOM 是为了操作文档出现的 API，document 是其的一个对象；
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

DOM

DOM全称：Document object Model （文档对象模型）。是针对XML的基于数的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。

BOM

BOM全称：Browser object Model （浏览器对象模型）。BOM其实就是为了控制浏览器的行为而出现的接口。
浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。
所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面，只需要
location.href = “http://www.xxxx.com”;这个 location 就是 BOM 里的一个对象。

DOM 、BOM网页展示

BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作,下图例：

归DOM管：E
E区（是document。里面有html，CSS和JS，部署在服务器上，我们可以通过浏览器的地址栏输入URL然后回车将这个document加载到本地，浏览，右键查看源代码等。

归BOM管：A、B、C、D
A区（浏览器的标签页，地址栏，搜索栏，书签栏，窗口放大还原关闭按钮，菜单栏等等）

B区（浏览器的右键菜单）

C区（document加载时的状态栏，显示http状态码等）

D区（滚动条scroll bar）

虚拟DOM （Virtual DOM）

vuejs 将DOM抽象成一个以JavaScript对象为节点的虚拟DOM树，再以Vnode节点模拟真实的DOM，可以对这颗抽象树进行创建节点，删除节点，修改节点的操作，经过diff算法得出需要修改的最小单位，再更新视图，大大提升的性能。

注：不是页面的真实DOM，是专门给vue或react操作的DOM，没放在页面上，是放在电脑的运行内存里。加上diff算法。为了是尽量减少与真实DOM的交互。

原文链接：https://blog.csdn.net/qq877507054/article/details/51395830