如何将HTML解析到Virtual DOM以实现编辑器增量更新？

我十分认可Virtual DOM的理念，它能减少我场景下服务端与客户端间的数据传输量，还可通过CSS高亮diff更新向用户展示变更内容。我希望为我的编辑器pankat扩展增量文档更新功能，但遇到的问题是：如何将现有HTML文档转换为Virtual DOM？ 通常Virtual DOM由各类函数构建，而非来自已存在的文档。是否存在我遗漏的类似vdom->parseHTML('index.html')的方法？我认为可在pankat中运行相关JavaScript代码。

服务端到客户端更新流程 #

• 使用pandoc生成静态HTML
• 服务端解析输出内容构建DOM
• 创建更新补丁
• 更新客户端Web UI

客户端到服务端更新流程 #

用户操作步骤：

• 编辑README.md
• 例如使用leaps编辑器
• 每次更新触发基于pandoc的静态HTML生成器
• 检测到变更后，触发上述服务端到客户端的更新流程

补充工具发现 #

我查阅笔记时发现了diffDOM工具，这是一款可直接对真实DOM进行差异对比并生成更新补丁的库，无需依赖Virtual DOM即可实现DOM的增量更新，很适合处理从现有HTML文档出发的DOM变更场景。

内容的提问来源于stack exchange，提问作者qknight