请补全JavaScript代码,要求将对象参数转换为真实的DOM结构并返回。
注意:
- tag为标签名称、props为属性、children为子元素、text为标签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var vnode = {
tag: 'ul',
props: {
class: 'list'
},
text: '',
children: [
{
tag: "li",
props: {
class: "item"
},
text: '',
children: [
{
tag: undefined,
props: {},
text: '牛客网',
children: []
}
]
},
{
tag: "li",
props: {},
text: '',
children: [
{
tag: undefined,
props: {},
text: 'nowcoder',
children: []
}
]
}
]
}
const _createElm = vnode => {
//把属性解构出来
let {tag,props,children,text} =vnode
if(typeof tag =='string'){
vnode.el=document.createElement(tag)
//设置标签的样式
_setAtrr(vnode.el,props)
//在节点中再添加文字
vnode.el.appendChild(document.createTextNode(text))
//遍历孩子
children.forEach(child=>{
//递归遍历元素
vnode.el.appendChild(_createElm(child))
})
}else{
//如果没有指明标签
vnode.el=document.createTextNode(text)
}
return vnode.el
}
//遍历属性,然后设置属性
const _setAtrr =(elem,attrs)=>{
for(key in attrs){
elem.setAtrribute(key,attrs[key])
}
}
</script>
</body>
</html>
创建每个标签,然后设置属性,对于children进行遍历再进行相同的操作