首页 > 试题广场 >

虚拟DOM

[编程题]虚拟DOM

热度指数：4989 时间限制：C/C++ 3秒，其他语言6秒空间限制：C/C++ 256M，其他语言512M
算法知识视频讲解

请补全JavaScript代码，要求将对象参数转换为真实的DOM结构并返回。
注意：
1. tag为标签名称、props为属性、children为子元素、text为标签内容

算法知识视频讲解

HTML/CSS/JavaScript

千寻南国

const _createElm = vnode => {
    // 补全代码
    let { tag, props, text, children } = vnode;
    let dom;
    if(typeof tag === 'string'){
        dom = document.createElement(tag);
        for(let prop in props){
            dom.setAttribute(prop, props[prop]);
        }
        dom.innerText = text;
        if(children.length){
            children.forEach(child => dom.appendChild(_createElm(child)));
        }
    }else{
        dom = document.createTextNode(text);
    }
    return dom;
}

发表于 2021-12-28 17:20:29 回复(2)

路过的一名白的不能再白的小白

const _createElm = vnode => {
    // 补全代码
    if(vnode.tag){
        let el = document.createElement(vnode.tag)
        el.innerText = vnode.text
        for(let key in vnode.props){
            el.setAttribute(key,vnode.props[key])
        }
        if(vnode.children.length > 0){
            for(let i = 0;i<vnode.children.length;i++){
                el.appendChild(_createElm(vnode.children[i]))
            }
        }
        return el
    }else {
        if(vnode.text){
            return document.createTextNode(vnode.text)
        }
    }
}

发表于 2022-07-05 10:43:38 回复(0)

Sonder2

本题考查 createElement,createTextNode方法的使用

            const _createElm = vnode => {
                // 补全代码
                const {tag, props, text, children} = vnode
                if(tag) {
                    let dom = document.createElement(tag)
                    props.class && dom.classList.add(props.class)
                    dom.innerText = text
                    children.length && children.forEach(item => dom.append(_createElm(item)))
                    return dom
                }else{
                    return document.createTextNode(text)
                }
            }

发表于 2023-09-06 22:07:40 回复(0)

HTML/CSS/JavaScript

HH123_3

const _createElm = vnode => {
                // 补全代码
                const e = document.createElement(vnode['tag']);
                e.textContent = vnode['text'];
                const props = vnode['props'];
                for(const x in props) {
                    e.setAttribute(x, props[x]);
                }
                for(const x of vnode['children']) {
                    e.appendChild(_createElm(x));
                }
                return e;
            }

发表于 2023-05-19 18:31:06 回复(0)

书山仰止

就问一句，东西写进了undefined孩子里，那text是干嘛用的？

发表于 2023-05-16 17:21:45 回复(0)

牛客205160422号

const _createElm = vnode => {

if(vnode.tag==undefined){

return document.createTextNode(vnode.text)

}

const element=document.createElement(vnode.tag)

for(key in vnode.props){

element.setAttribute(key,vnode.props[key])

}

vnode.children.forEach((ite)=>{

element.appendChild(_createElm(ite))

})

return element

}

发表于 2023-04-06 17:04:36 回复(0)

HTML/CSS/JavaScript

牛客774865783号

const _createElm = function(obj){
                const {tag:target,props,text} = obj
                const el = document.createElement(target)
                Object.keys(props).forEach(key=>el.setAttribute(key,props[key]))
                el.innerText = text
                if(obj.children){
                    obj.children.forEach(item=>{
                        el.appendChild(_createElm(item))
                    })
                }
                return el
            }

发表于 2023-01-11 20:04:14 回复(1)

欧阳嘉峰努力学习ing

应该是目前较简洁的啦

 const _createElm = vnode => {
    let { tag, props, text, children } = vnode
    // 补全代码
    if (typeof tag == "string") {
        let dom = document.createElement(tag)
        dom.innerText = text
        for (key in props) {
            dom.setAttribute(key, props[key])
        }
        // forEach不会遍历空数组！
        children.forEach(item => {
            // 开始递归
            let childrenDom = _createElm(item)
            dom.append(childrenDom)
        });
        return dom
    } else {
        return document.createTextNode(text)
    }
}

发表于 2022-12-03 15:16:17 回复(0)

狼通

写了个递归

            const _createElm = vnode => {
                // 补全代码
                const { tag, props, text, children } = vnode;
                if (tag) {
                    const tagDOM = document.createElement(tag);
                    
                    for (key in props) {
                        tagDOM.setAttribute(key, props[key])
                    }
                    
                    if (children.length > 0) {
                        children.forEach(item => {
                            tagDOM.append(_createElm(item))
                        })
                    }
                    
                    return tagDOM;
                }
                return text;
            }

发表于 2022-10-21 17:25:00 回复(0)

337845818

const _createElm = vnode => {
    // 补全代码
    if (vnode.tag) {
        let el = document.createElement(vnode.tag)
        for (const [key, val] of Object.entries(vnode.props)) {
            el.setAttribute(key, val)
        }
        el.innerText = vnode.text
        if (vnode.children.length == 0) {
            return
        } else {
            for (let e of vnode.children) {
                let el2 = _createElm(e)
                el.appendChild(el2)
            }
        }
        return el
    }
    else {
        return document.createTextNode(vnode.text)
    }
}

Object.entries()不能用么？？

发表于 2022-07-27 22:16:07 回复(0)

HTML/CSS/JavaScript

小谷围做题家

const setAttr=(el,props)=>{
    Object.keys(props).forEach(key=>{
        el.setAttribute(key,props[key])
    })
}
const _createElm = vnode => {
    let {tag,props,text,children}=vnode
    if(typeof tag=='string'){
        vnode.el=document.createElement(tag)
        setAttr(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
}
document.body.appendChild(_createElm(vnode))

发表于 2022-05-04 15:28:39 回复(0)

HTML/CSS/JavaScript

huaxifn

const _createElm = vnode => {
    // 补全代码
    cre(document.body,vnode);
    function cre(parent, obj) {
        var tag = document.createElement(obj.tag);
        tag.innerHTML = obj.text;
        if (Object.keys(obj.props).length != 0) {
            Object.keys(obj.props).forEach(p => {
                tag.setAttribute(p,obj.props[p]);
            })
        }
        parent.appendChild(tag);
        obj.children.forEach(el => {
            cre(tag,el);
        })
    }
    return document.querySelector(vnode.tag);
}

发表于 2022-02-14 14:52:06 回复(0)

攀登者1号

const _createElm = vnode => {
// 补全代码
//解构递归
                let {tag,props,text,children} = vnode
                if(typeof tag == 'string'){
                    vnode.el = document.createElement(tag)
                    _addProps(vnode.el,props)
                    vnode.el.appendChild(document.createTextNode(text))
                    children.forEach(item => {
                        vnode.el.appendChild(_createElm(item))
                    })
                }
                else{
                    vnode.el = document.createTextNode(text)
                }
                return vnode.el
}
            function _addProps(el,props){
                for(let key in props){
                    el.setAttribute(key,props[key])
                }

发表于 2022-02-11 15:28:30 回复(0)

浮白勿追忆

const _createElm = function (vnode) {
    // 补全代码
    const thisFn = arguments.callee
    let node = document.createElement(vnode.tag)
    for (let prop in vnode.props) {
        node.setAttribute(prop, vnode.props[prop])
    }
    node.innerText = vnode.text
    if(vnode.children.length){
        for (let child of vnode.children) {
            node.appendChild(thisFn(child))
        }
    }
    return node
}

发表于 2021-12-24 10:32:55 回复(0)

HTML/CSS/JavaScript

chuan_chuange

const _createElm = vnode => {
                // 补全代码
                const list = vnode.children;
                let ele = document.createElement(vnode.tag);
                ele.innerText = vnode.text;
                ele.className = vnode.props.class ? vnode.props.class : ''
                const elm = (vnode,parent) => {
                  vnode.map(item => {
                        if(item.children && item.children.length > 0){
                            let element = document.createElement(item.tag)
                            element.innerText = item.text;
                            element.className = item.props.class ? item.props.class : ''
                            parent.appendChild(element);
                            elm(item.children,element)
                        }else{
                            let element = item.tag ? document.createElement(item.tag) : '';
                            element.innerText = item.text;
                            element.className = item.props.class ? item.props.class : ''
                            element ? parent.appendChild(element) : parent.innerText = item.text
                        }
                    }) 
                }
                elm(list,ele)
                return ele;
            }

发表于 2021-12-15 15:41:25 回复(0)

HTML/CSS/JavaScript

HGHGHG

const _createElm = function (vnode) {
    // 补全代码
    const thisFn = arguments.callee
    let node = document.createElement(vnode.tag)
    for (let prop in vnode.props) {
        node.setAttribute(prop, vnode.props[prop])
    }
    node.innerText = vnode.text
    for (let child of vnode.children) {
        node.appendChild(thisFn(child))
    }
    return node
}

发表于 2021-12-05 00:49:30 回复(1)

提交观点

问题信息

难度：

16条回答 126收藏 373浏览

通过挑战的用户

查看代码

在吐槽的熊猫很...

2023-06-29 10:15:32
书生不媚

2023-06-28 17:43:16
牛客28609...

2023-06-28 17:22:40
忙碌的小刺猬在求佛

2023-06-28 14:35:22
螺蛳粉加炸蛋加青菜

2023-06-28 13:52:48

虚拟DOM

问题信息

热门推荐

通过挑战的用户

相关试题