指定body节点下的任意元素节点，如何快速算出它是body的第几代，第几个子孙元素？

我们开发时有一个需求，让我几乎崩溃。
需求总结后就是：
指定body节点下的任意元素节点，算出它是body节点的第几个儿子的，第几个孙子。这个关系可以很长。比如某些很深的元素节点，可能结论是：某元素节点是body节点的第2个儿子的第3个儿子的第1个儿子的第9个儿子。

（PS：textNode要跳过，只计算elementNode）

我实在搞不定了，搜资料也没找到对口的，求大神帮忙，分享一些资料也好啊。

阅读 3k

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div></div>
    <div>
        <div>
            <span>
      你是一个
      <a href="http://www.baidu.com">链接</a>
      吧
    </span>
            <span>
      另一个 <a href="http://mail.163.com">链接</a>
    </span>
        </div>
    </div>
    <ul></ul>
    <ul>
        <li>没事</li>
        <li>
            <ol>
                <li>第0</li>
                <li>第1</li>
                <li>第3是个 <a href="#" id='lastA'>链接</a></li>
            </ol>
        </li>
    </ul>
</body>
<script>
function Path(el) {
    if (!el) return;
    const res = [{
        el: el,
        index: findIndex(el),
        type: el.nodeName
    }];
    while (el.parentNode && el.parentNode !== document.documentElement) {
        res.push({
            el: el.parentNode,
            index: findIndex(el.parentNode),
            type: el.parentNode.nodeName
        });
        el = el.parentNode
    };
    return res.reverse().reduce(function(prev, item) {
        prev += '第' + item.index + '个' + item.type + '下'
        return prev
    }, '').replace(/下$/, '')
}

function findIndex(el) {
    let index = 1;
    while (el.previousSibling) {
        if (el.previousSibling.nodeType === 1 && el.parentNode !== document.documentElement)
            index++;

        el = el.previousSibling
    }
    return index
}
console.log(Path(document.getElementById('lastA')))
</script>

</html>

指定body节点下的任意元素节点，如何快速算出它是body的第几代，第几个子孙元素？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

如何实现一个深拷贝函数？

git提交记录问题？

快开发完的Vue3项目要做SEO该如何处理？

怎么获取动态弹出对话框的模拟单击？