前端面试题之将自定义数据结构转化成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>
相关推荐
杰克尼1 小时前
BM5 合并k个已排序的链表
数据结构·算法·链表
xiaolang_8616_wjl2 小时前
c++文字游戏_闯关打怪
开发语言·数据结构·c++·算法·c++20
hqxstudying3 小时前
Java创建型模式---单例模式
java·数据结构·设计模式·代码规范
sun0077003 小时前
数据结构——栈的讲解(超详细)
数据结构
ゞ 正在缓冲99%…8 小时前
leetcode918.环形子数组的最大和
数据结构·算法·leetcode·动态规划
努力写代码的熊大9 小时前
单链表和双向链表
数据结构·链表
Orlando cron10 小时前
数据结构入门:链表
数据结构·算法·链表
许愿与你永世安宁15 小时前
力扣343 整数拆分
数据结构·算法·leetcode
Heartoxx16 小时前
c语言-指针(数组)练习2
c语言·数据结构·算法
杰克尼17 小时前
1. 两数之和 (leetcode)
数据结构·算法·leetcode