JS40 虚拟DOM

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

js 专栏收录该内容

27 篇文章

订阅专栏

该文章展示了一段JavaScript代码，用于将包含tag、props、children和text的对象转换成实际的DOM元素。代码首先定义了一个_createElm函数，通过递归处理对象的children属性来创建DOM树，并使用_setAtrr函数设置元素的属性。

请补全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>