前端面试题之将自定义数据结构转化成DOM元素

题目描述:

如下图所示:给你一个嵌套的dom数据结构,如何将它转化成jsx的dom元素;

输入:

javascript 复制代码
const data = { 
 tagName: 'ul', 
 props: {'class': 'list'}, 
 children: [ 
  {tagName: 'li', children: ['douyin']},
  {tagName: 'li', children: ['toutiao']},
  {
    tagName: 'li', 
    children: [
        {
            tagName: 'span',
            props: { 'class': 'span' },
            text: 'meituan'
        },
    ]
  },
 ]
};

输出:

html 复制代码
<ul class="list">
 <li>douyin</li>
 <li>toutiao</li>
 <li>
    <span>meituan</span>
 </li>
</ul>

解题思路:

1.解读data数据结构,里面有tagName属性,我们可以使用document.createElement来创建html标签,并且复制给根元素element;

2.针对children属性,因为内部属性和父元素的属性是一样的,所以此处使用递归来调用函数即可

3.data数据显示文本有string、text属性两种格式;需要将这两种格式转化成节点类型的元素,方便使用appendChild将其放入到根元素element;

具体代码如下:

javascript 复制代码
<script>
    /**
    * 将自定义数据结构转换为DOM元素
    * @param {Object} node - 包含标签名、属性和子节点的数据对象
    * @returns {HTMLElement} 生成的DOM元素
    */
    function createDOMElement(node) {
        // 处理非对象类型(如文本节点)
        if (typeof node === 'string') {
            return document.createTextNode(node)
        }
        
        // 创建根元素element
        const element = document.createElement(node.tagName);

        
        // 设置元素属性
        if (node.props !== null && typeof node.props === 'object') {
            // 将node.props遍历,将其key, value通过setAttribute塞值给element
            for (let key in node.props) {
                element.setAttribute(key, node.props[key])
            }
        }

        // 处理子节点
        if (Array.isArray(node.children)) {
            // 递归处理子节点并添加到当前元素
            node.children.forEach(childNode => {
                const childElement = createDOMElement(childNode)
                // 将处理好的子节点push到element
                element.appendChild(childElement)
            })
        } else if (node.text) {
            // 处理文本节点
            element.appendChild(document.createTextNode(node.text))
        }
        
        return element
    }

    // 使用示例

    const data = {
        tagName: 'ul',
        props: { 'class': 'list' },
        children: [
            { tagName: 'li', children: ['douyin'] },
            { tagName: 'li', children: ['toutiao'] },
            {
                tagName: 'li',
                children: [
                    {
                        tagName: 'span',
                        props: { 'class': 'span' },
                        text: 'meituan'
                    },
                ]
            },
        ]
    };



    // 生成DOM元素并插入到页面中
    const rootElement = createDOMElement(data);
    document.body.appendChild(rootElement);
</script>
相关推荐
没书读了2 小时前
考研复习-数据结构-第八章-排序
数据结构
waveee1233 小时前
学习嵌入式的第三十四天-数据结构-(2025.7.29)数据库
数据结构·数据库·学习
jie*4 小时前
小杰数据结构(one day)——心若安,便是晴天;心若乱,便是阴天。
数据结构
伍哥的传说5 小时前
React & Immer 不可变数据结构的处理
前端·数据结构·react.js·proxy·immutable·immer·redux reducers
ZTLJQ7 小时前
专业Python爬虫实战教程:逆向加密接口与验证码突破完整案例
开发语言·数据结构·爬虫·python·算法
努力的小帅8 小时前
C++_红黑树树
开发语言·数据结构·c++·学习·算法·红黑树
逐花归海.8 小时前
『 C++ 入门到放弃 』- 哈希表
数据结构·c++·程序人生·哈希算法·散列表
qqxhb10 小时前
零基础数据结构与算法——第六章:算法设计范式与高级主题-设计技巧(上)
java·数据结构·算法·分解·空间换时间·时空平衡
xiaofann_10 小时前
【数据结构】用堆实现排序
数据结构
Swiler10 小时前
数据结构第2问:什么是算法?
数据结构·人工智能·算法