模拟Dom转换为真实Dom

敲啊敲9527

于 2023-08-01 19:45:00 发布

阅读量219

点赞数

分类专栏： vue学习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44423378/article/details/132042391

版权

vue学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

将虚拟DOM转化为真实DOM

var diffDom = {
  tag:'DIV',
  attrs:{
   id:'app'
  },
  children:[
    {
      tag:'APAN',
      children:[
	    {tag:'A',children:[]}
	  ]
    },
    {
    	tag:'APAN',
    	children:[
    	  {tag:'A',children:[]},
    	  {tag:'A',children:[]}	
    	]	
    }
  ]
}
// 把上面的虚拟Dom转化成下方真实Dom

<div id="app">
  <span>
    <a></a>
  </span>
  <span>
    <a></a>
    <a></a>
  </span>
</div>

实现：

// 定义函数
function _render(vnode){
  if(typeof vnode === "number"){
	vnode = String(vnode)
	}
	if(typeof vnode === "string"){
	return document.createTextNode(vnode);
	}
	const dom = document.createElement(vnode.tag)
	if(vnode.attrs){
	  Object.keys(vnode.attrs).forEach((key)=>{
		const value = vnode.attrs[key];
		dom.setAttribute(key,value);
		})
	}
	vnode.children.forEach((child)=> dom.appendChild(_render(child)));
	return dom;
}
_render(diffDom)