Javascript 在导航菜单中将类添加到祖先？

我有一个相当大的导航菜单。我想循环浏览菜单，并使用纯JavaScript向当前菜单和任何祖先（如果适用）添加class=“active”

以下是我所拥有的一个简化示例：

<nav id="mainNav">
<ul>
    <li><a href="/news/">News</a></li>
    <li class="hasChildren"><a href="/computers">Computer</a>
        <ul>
            <li><a href="/dell"></a>Dell</li>
            <li><a href="/apple"></a>Apple</li>
            <li class="hasChildren"><a href="/hp">HP</a>
                <ul>
                    <li><a href="/single-hp-computer">Single</a></li>
                    <li><a href="/another-hp-computer" class="active">Another</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</nav>

对于本例，目标是使计算机、HP和其他计算机的锚定标记接收class='active'

希望这是可行的，并且我正确地复制了所有内容。我不想复制整个真实导航，因为它相当大

提前谢谢

// grab current page URL and store in var
var currentPageURL = window.location.href;

/*
  Create a loop that will go through each Nav menu item
  and compare it to the current page variable
  if they're equal, set active class 
*/

var navContainer = document.querySelector("#mainNav");
var navElements = navContainer.querySelectorAll('a');

navElements.forEach(function(element){
  if (currentPageURL == element.href){
      element.classList.add("active");
      console.log(element);

      //add a loop here to add 'active' to all ancestors, if there are any
  }
});