javascript - 通过递归实现的 JavaScript DOM 深度

Question

我有一个带有一堆递归子节点的节点。我试图找出每个节点离根有多远（它的 id 为“comment-0”）。

我有以下 HTML 结构：

<div id="comment-0">
  <div id="comment-2598" class="comment comment--parent" data-cid="2598">
    <div id="comment-2599" class="comment comment--child" data-cid="2599">
      <div id="comment-2615" class="comment comment--child" data-cid="2615">
      </div>
    </div>
    <div id="comment-2604" class="comment comment--child" data-cid="2604">
      <div id="comment-2616" class="comment comment--child" data-cid="2616">
      </div>
    </div>
  </div>
</div>

调用函数：

rootNode.querySelectorAll('.comment').forEach((el)=>{
  const result = findDepth(el,0);
  console.log("el: "+el.id, result);
});

和我的递归函数：

const findDepth = (el, depth) => {
    depth++;
    console.log(el.id, el.parentNode.id);
    console.log(depth);
    if(el.parentNode.id !== 'comment-0'){
        findDepth(el.parentNode, depth);
    }else {
        return depth;
    }
};

递归函数似乎成功地找出每个节点离根的距离，但是，无论depth函数内部的值如何，当返回值时它是未定义的，我不明白为什么。

标签： javascriptrecursion