前几年入行前端的对Dom操作应该都不陌生，大量使用JQuery语法。
这几年框架的流行，可能会有很多人不太理解Dom的操作，本篇沉淀一下Dom的相关知识
HTML DOM
DOM是文档对象模型的简称（Documnet Object Model）
HTML页面以DOM树形式如下
Document是浏览器内置对象，通过Document可以获取并操作Dom。
获取DOM
getElementById通过ID查找元素getElementsByTagName通过标签名查找元素getElementsByClassName通过类名查找元素querySelector通过CSS选择器查找元素querySelectorAll通过CSS选择器查找元素
修改DOM
document.write()直接写入 HTML 输出流innerHTML通过属性修改指定标签内容setAttribute设置属性的方法attribute改变属性
新建DOM
createElement创建HTML元素，不会添加到DOM上，需要调用上述方法才能添加到DOm上removeChild删除HTML元素appendChild添加HTML元素replaceChild替换 HTML 元素
上述方法都是操作DOM的方法，在Vue、React等框架出现之前，都是用jQuery操作dom，虽然比上面的简单一些，其实也是对上述方法的封装。
虚拟DOM
在Vue、React等框架出现以后，出现了虚拟DOM的概念，真实DOM是Document对象模型。那么虚拟DOM是什么呢？
首先虚拟DOM并非真实DOM，在Vue中虚拟DOM指VNode，包含tag、data、children...等属性。
Vnode部分源码
export default class VNode {
tag: string | void;
data: VNodeData | void;
children: ?Array<VNode>;
text: string | void;
elm: Node | void;
ns: string | void;
context: Component | void; // rendered in this component's scope
key: string | number | void;
componentOptions: VNodeComponentOptions | void;
componentInstance: Component | void; // component instance
parent: VNode | void; // component placeholder node
...
}
实际例子
// <div><p>1</p></div>
{
tag: '<div>',
children: [
{
tag: 'p',
text: '1'
}
]
}
通过属性嵌套形成类似顶部DOM数的结构。
在Vue之前，如果数据更新，一般做法是直接重新渲染指定区域的DOM，在Vue以后，出现了Diff算法，通过对比新的虚拟DOM和旧的虚拟DOM来更新部分节点，以节约性能。
关于虚拟DOM具体分析和diff过程本文不在描述，后续会对比Vue2和Vue3源码对比分析会进行详细分析
最后将虚拟DOM渲染到页面上还是文章顶部那些方法。
