DOM树在内存中的表示及JSX的遍历

1. DOM遍历

Question:
请用递归的方式遍历树形数据结构中的每一个节点

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake'
          }
        ]
      }
    ]
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men'
          }
        ]
      }
    ]
  }
];
// 深度优先遍历
function eachOpt(option){
	option.forEach(element => {
		console.log('element value....',element.value)
		if(Array.isArray(element.children) && element.children.length){
        	eachOpt(element.children)
      	}
   	});
}
eachOpt(options)

2.DOM解析

Question:
将类似以下JSON表示的树状结构(可以无限层级)通过parseDOM函数(使用document.createElement, document.createTextNode,appendChild等方法)生成一颗DOM树(返回一个element元素)

const JsonTree={
    "tagName":"ul",
    "props":{
        "className":"list",
        "data-name":"jsontree"
    },
    "tagName":"a",
    "props":{
        "href":"https://www.aliyun.com",
        "target":"_blank"
    },
    "children":"阿里云"
  } 
};

function parseDOM(jsontree){
    const {tagName,props,children}=jsontree;
    const element = document.createElement("ul")
    if(Array.isArray(children)){
        children.forEach(item=>{
            element.appendChild(parseDOM(item))
        })
    }else{
        let child = document.createText(children); 
        element.appendChild(child);
    }
    if(props){
        Object.keys(props).forEach(item=>{
            element[item]=props[item];
        })
    }
    return element;
}