在使用vue时，我们常说到的一个概念就是虚拟DOM。那么虚拟DOM是什么?虚拟DOM就是根据真实DOM模拟出的一个JSON对象。在操作DOM时，不是直接去操作DOM，而是先修改虚拟DOM，然后再选择性的更新真实DOM。
为什么这么做？操作真实DOM要比操作虚拟DOM慢？
在写原生JS的时候，我们要可能的避免频繁的直接操作DOM。因为操作DOM可能会经过浏览器的重排重绘，消耗性能，现在JS中处理会提效很多。所以虚拟DOM的出现，为此提供了便利。
那么虚拟DOM是怎么来的呢？这里做一个简单的实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container" id="container">
<article class="article" id="article">
<header class="header">头部</header>
<section class="section">章节1</section>
<section class="section">章节2</section>
<section class="section">章节3</section>
<footer class="footer"><div>备案</div><div>链接</div></footer>
</article>
</div>
<script>
function convertHtmlToJson(node) {
let result = {};
result.classNames = node.className;
result.id = node.id;
result.nodeValue = node.firstChild.nodeValue;
result.tagName = node.tagName;
result.children = [];
if (node.children.length > 0) {
for ( let child of node.children) {
child.localName.toLowerCase() !== 'script' &&
result.children.push(convertHtmlToJson(child));
}
}
return result;
}
const result = convertHtmlToJson(document.body);
console.log(result);
</script>
</body>
</html>
