In a tree, nodes have a single parent node and may have many children nodes. They never have more than one parent nor point to any siblings.
The most common tree structure you see is a web page. The underlying structure is often called the "DOM tree". The html
element forms the root of our tree, with children of head
and body
, so on and so forth. In this lesson, we‘ll create a quick example of a DOM tree with our tree data structure.
function crateNode (key) { let children = []; return { key, children, addChild (cKey) { const childNode = crateNode(cKey) this.children.push(childNode) return childNode; } } } function createTree (rootKey) { const root = crateNode(rootKey); function print () { let result = ‘‘; function traverse (node, visitFn, depth) { visitFn(node, depth); if (node.children.length) { node.children.forEach(n => traverse(n, visitFn, depth + 1)) } } function addKeyToResult(node, depth) { result += result.length === 0 ? node.key : `\n${‘ ‘.repeat(depth * 2)}${node.key}` } traverse(root, addKeyToResult, 0) return result; } return { root, print } } const dom = createTree(‘html‘) const head = dom.root.addChild(‘head‘) const body = dom.root.addChild(‘body‘) const title = head.addChild(‘title - egghead Tree Lesson‘) const header = body.addChild(‘header‘) const main = body.addChild(‘main‘) const footer = body.addChild(‘footer‘) const h1 = header.addChild(‘h1 - Tree Lesson‘) const p = main.addChild(‘p - Learn about trees!‘) const copyright = footer.addChild(`Copyright ${new Date().getFullYear()}`) console.log(dom.print()) /* html head title - egghead Tree Lesson body header h1 - Tree Lesson main p - Learn about trees! footer Copyright 2018 */
原文地址:https://www.cnblogs.com/Answer1215/p/10134940.html
时间: 2024-10-07 16:46:11