在遍历html语法树中用到了深度优先遍历和广度优先遍历，就自己用js实现了下

//广度遍历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;}

测试

//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)})

广度优先　　

body
div
div
div
span
span
span
span
span
span

深度优先
body
div
span
span
div
span
span
div
span
span