遍历DOM树，拿到每个路径的便签和当前经过的便签的最大data-v的值

[TieMuZhen]

题目

遍历DOM树，拿到每个路径的便签和当前经过的便签的最大data-v的值

<div id="root" data-v="3">
    <p data-v="1">p1</p>
    <span data-v="2">
        <span data-v="4">span2</span>
    </span>
    <p data-v="99">p2</p>
</div>

输出如下

["DIV"] 3
["DIV", "P"] 3
["DIV", "SPAN"] 3
["DIV", "SPAN", "SPAN"] 4
["DIV", "P"] 99

函数入口如下

traverse(document.getElementById('root'));

代码实现

const stack = [];
let maxVal = -Infinity;

function traverse(el){
    stack.push(el.nodeName)
    const data_v = el.getAttribute('data-v');
    if(data_v > maxVal){
        maxVal = data_v;
    }

    const nodes = el.childNodes;
    console.log(stack, maxVal);
    if(!nodes){
        stack.pop();
        return;
    }
    
    nodes.forEach(node => {
        node.nodeType == 1 && traverse(node);
    })
}
traverse(document.getElementById('root'));