真实dom转换为虚拟dom的简单实现

标题真实dom转换为虚拟dom的简单实现

首先给出虚拟dom的数据结构。

function vnode(tag, data) {this.tag = tag;this.data = data;this.childern = [];}

一个虚拟节点拥有标签名(tag),属性数据(data),和子节点(childern)。

我们再为这个对象添加一个方法,用来增加子节点。

 vnode.prototype.addChild = function (node) {this.childern.push(node);}

定义好了虚拟节点的对象，接下就去获取真实的节点。

 var b = document.getElementsByTagName('body')[0]var fragment = document.createDocumentFragment()var vnodelist = []while (b.firstChild) {fragment.appendChild(b.firstChild)}var nodelist = fragment.childNodes;nodelist = Array.prototype.slice.call(nodelist);

首先定位到body节点，创建一个文档碎片对象，我们将body节点下的所有节点加入到文档碎片中，再将文档碎片中的所有孩子节点拿出来，强制转换成一个节点数组(nodelist),这样就拿到了body下面的所有节点。

然后实现真实节点到虚拟节点的转变。

function createvnode(node) {let v = null;if (node.nodeType === 1) {let tag = node.nodeName.toLowerCase();let data = {};let attribute = node.attributes;[...attribute].forEach(attr => {var { name, value } = attr;data[name] = value;})// let text = node.innerText;v = new vnode(tag,data);nodechildern = node.childNodes;if(nodechildern){[...nodechildern].forEach(kid => {v.addChild(createvnode(kid))})}} else if(node.nodeType === 3){v = new vnode('text',node.nodeValue)}return v;}

如果是文本节点，我们就直接设置其tag为text，data为文本的内容。

最后遍历节点数组，将所有节点转变为虚拟节点。

nodelist.forEach(node => {vnodelist.push(createvnode(node));})

完整的代码如下。

window.onload = function () {var b = document.getElementsByTagName('body')[0]var fragment = document.createDocumentFragment()var vnodelist = []while (b.firstChild) {fragment.appendChild(b.firstChild)}var nodelist = fragment.childNodes;nodelist = Array.prototype.slice.call(nodelist);function vnode(tag, data) {this.tag = tag;this.data = data;// this.text = text;this.childern = [];}vnode.prototype.addChild = function (node) {this.childern.push(node);}function createvnode(node) {let v = null;if (node.nodeType === 1) {let tag = node.nodeName.toLowerCase();let data = {};let attribute = node.attributes;[...attribute].forEach(attr => {var { name, value } = attr;data[name] = value;})// let text = node.innerText;v = new vnode(tag,data);nodechildern = node.childNodes;if(nodechildern){[...nodechildern].forEach(kid => {v.addChild(createvnode(kid))})}} else if(node.nodeType === 3){v = new vnode('text',node.nodeValue)}return v;}nodelist.forEach(node => {vnodelist.push(createvnode(node));})for(var i = 0;i<vnodelist.length;i++){console.log(vnodelist[i])}b.appendChild(fragment)
}

html代码如下。

<!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><script src="./dom_to_vdom.js"></script><div id='app'><span>11</span><p>12</p></div>
</body>
</html>

最后得到的结果如图。

真实dom转换为虚拟dom的简单实现相关推荐

说说真实dom和虚拟dom有什么区别，虚拟dom的优势是什么？
区别:虚拟dom不会进行排版与重绘操作,而真实dom会频繁的排版+重绘,而虚拟dom的总损耗是虚拟dom+真实dom的增删改+排版重绘,而真实dom的总损耗是dom的完全增删改+排版重绘虚拟dom的 ...
从DOM到虚拟DOM——前端DOM发展史、性能与产能双赢背后的思考
写在前面的一些话从我上大学开始正式认识前端这个岗位到现在已经整整过了六年,这六年于我而言就像是观赏了一场盛大的游园活动.无数各式各样的框架.模式.开发思路如同花车一般从眼前掠过又走远.留下了一地残乱 ...
什么是虚拟DOM？虚拟DOM的定义和作用？
虚拟DOM的作用和定义什么是虚拟DOM 虚拟DOM就是普通的js对象.是一个用来描述真实dom结构的js对象,因为它不是真实的dom,所以才叫做虚拟dom. 虚拟dom的作用我们都知道传统的dom ...
真实DOM和虚拟DOM
文章目录如何高效操作DOM 什么是DOM 浏览器真实解析DOM的流程为什么说操作DOM耗时如何高效操作DOM 虚拟DOM 什么是虚拟DOM 为什么要有虚拟DOM 虚拟DOM的作用 Vue中的虚拟 ...
[react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
传递HTML字符串virtual,理解Virtual DOM(1) 真实DOM和虚拟DOM的映射
什么是Virtual DOM? 所谓virtual,指的是对真实DOM的一种模拟.相对于直接操作真实的DOM结构,我们构建一棵虚拟的树,将各种数据和操作直接应用在这棵虚拟的树上,然后再将对虚拟的树的修 ...
【Virtual DOM】虚拟 DOM 和 Snabbdom 库
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读 Virtual DOM 基本介绍什么是 Virtual DOM Virtual DOM(虚拟 DOM),是由普通的的 ...
【Vue.js源码解析二】-- 虚拟 DOM
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读虚拟 DOM 基本介绍什么是虚拟 DOM 虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象 ...
构建一个虚拟DOM并转换为真实DOM
关于真实DOM与虚拟DOM 1.在学习虚拟DOM之前,让我们先来了解一下真实的DOM结构,这里不得不提的是关于浏览器渲染方面的知识. 当浏览器拿到一个HTML文件,首先会根据HTML文件构建出一个DO ...

真实dom转换为虚拟dom的简单实现

标题真实dom转换为虚拟dom的简单实现

真实dom转换为虚拟dom的简单实现相关推荐

最新文章

热门文章