js depth-first and breadth-first traversal of the syntax tree

Uses a depth-first traversal and breadth-first traversal of the syntax tree traversal of html, js achieve on their own with the next

//广度遍历html节点
function breadthSearch(item, childProp){
    const nodeList=[item]
    let index=0;
    while (index<nodeList.length){
        const node=nodeList[index++];
        if(node[childProp]){
            for(let k in node[childProp]){
                nodeList.push(node[childProp][k]);
            }
        }
    }
    return nodeList;
}
//深度遍历html节点
function depthSearch(node,childProp){
    const nodeList=[]
    const depthEach=function(item){
        nodeList.push(item);
        if(item[childProp]){
            for(let k in item[childProp]){
                depthEach(item[childProp][k]);
            }
        }
    }
    depthEach(node);
    return nodeList;
}

　　

test

//html的语法树
const astJSON={
    "type": 1,
    "tag": "body",
    "attrsList": [],
    "attrsMap": {},
    "rawAttrsMap": {},
    "children": [
        {
            "type": 1,
            "tag": "div",
            "attrsList": [],
            "attrsMap": {},
            "rawAttrsMap": {},
            "parent": "[Circular ~]",
            "children": [
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.0]",
                    "children": [
                        {
                            "type": 3,
                            "text": "\n    foo\n  ",
                            "start": 37,
                            "end": 48,
                            "static": true
                        }
                    ],
                    "start": 31,
                    "end": 55,
                    "plain": true,
                    "static": true
                },
                {
                    "type": 3,
                    "text": " ",
                    "start": 55,
                    "end": 58,
                    "static": true
                },
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.0]",
                    "children": [
                        {
                            "type": 3,
                            "text": "bar",
                            "start": 64,
                            "end": 67,
                            "static": true
                        }
                    ],
                    "start": 58,
                    "end": 74,
                    "plain": true,
                    "static": true
                }
            ],
            "start": 23,
            "end": 81,
            "plain": true,
            "static": true
        },
        {
            "type": 3,
            "text": " ",
            "start": 81,
            "end": 83,
            "static": true
        },
        {
            "type": 1,
            "tag": "div",
            "attrsList": [],
            "attrsMap": {},
            "rawAttrsMap": {},
            "parent": "[Circular ~]",
            "children": [
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.2]",
                    "children": [
                        {
                            "type": 3,
                            "text": "\n  foo\n  ",
                            "start": 127,
                            "end": 136,
                            "static": true
                        }
                    ],
                    "start": 121,
                    "end": 143,
                    "plain": true,
                    "static": true
                },
                {
                    "type": 3,
                    "text": " ",
                    "start": 143,
                    "end": 144,
                    "static": true
                },
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.2]",
                    "children": [
                        {
                            "type": 3,
                            "text": "bar",
                            "start": 150,
                            "end": 153,
                            "static": true
                        }
                    ],
                    "start": 144,
                    "end": 160,
                    "plain": true,
                    "static": true
                }
            ],
            "start": 115,
            "end": 167,
            "plain": true,
            "static": true
        },
        {
            "type": 3,
            "text": " ",
            "start": 167,
            "end": 169,
            "static": true
        },
        {
            "type": 1,
            "tag": "div",
            "attrsList": [],
            "attrsMap": {},
            "rawAttrsMap": {},
            "parent": "[Circular ~]",
            "children": [
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.4]",
                    "children": [
                        {
                            "type": 3,
                            "text": " foo ",
                            "start": 212,
                            "end": 217,
                            "static": true
                        }
                    ],
                    "start": 206,
                    "end": 224,
                    "plain": true,
                    "static": true
                },
                {
                    "type": 3,
                    "text": " ",
                    "start": 224,
                    "end": 225,
                    "static": true
                },
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.4]",
                    "children": [
                        {
                            "type": 3,
                            "text": "bar",
                            "start": 231,
                            "end": 234,
                            "static": true
                        }
                    ],
                    "start": 225,
                    "end": 241,
                    "plain": true,
                    "static": true
                }
            ],
            "start": 201,
            "end": 247,
            "plain": true,
            "static": true
        }
    ],
    "start": 0,
    "end": 255,
    "plain": true,
    "static": true,
    "staticInFor": false,
    "staticRoot": true,
    "staticProcessed": true
}

//广度优先遍历
breadthSearch(astJSON,'children').forEach(function (node) {
    if(node.type===1)
        console.log(node.tag)
})

//深度优先遍历
depthSearch(astJSON,'children').forEach(function (node) {
    if(node.type===1)
        console.log(node.tag)
})

 

Breadth-First　　

body
div
div
div
span
span
span
span
span
span

Depth-first
body
div
span
span
div
span
span
div
span
span