在遍历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
原文地址：https://www.cnblogs.com/caoke/p/10990148.html
时间： 2024-10-11 00:32:30