如何使用原生JavaScript精准获取目标元素的指定祖先节点？

需求场景 #

给定如下DOM结构：

<div class='content'  id='cart-content'>
  <div class='child1'>
       <div class='child1-1'>
           <div class='child1-1-1'>
               <input 
                 type='checkbox'
                 class='selectAllItem'
                 name='selectAllItem'
              />Select All
           </div>
       </div>
  </div>
  
  <div class='child2'>
       <div class='child2-2'>
           <div class='child2-2-2'>
               <input 
                 type='checkbox'
                 class='selectOneItem'
                 name='selectOneItem'
              />Select One
           </div>
       </div>
  </div>
</div>

需要实现：勾选「Select All」复选框时，获取id="cart-content"的根节点；但勾选「Select One」复选框时，不返回该根节点——因为它的父节点路径不包含.child1-1-1。

现有方案的问题 #

• 方案1：使用event.target.closest('#cart-content')，两个复选框都会返回根节点，因为它们都处于该节点的子树中。

  let rootNode = event.target.closest('#cart-content')
  

• 方案2：使用多层parentNode遍历，由于两个复选框到根节点的层级相同，同样会返回相同结果。

  let rootNode = event.target.parentNode.parentNode.parentNode.parentNode;
  

jQuery实现逻辑 #

以下jQuery代码可满足需求：

let rootNode = $(this).parent('.child1-1-1').parents('#cart-content');

逻辑是：先验证当前元素的直接父节点是否为.child1-1-1，再从该父节点向上查找根节点；如果直接父节点不匹配，就不会返回根节点。

原生JS实现方案 #

方案一：先验证直接父节点，再查找根节点 #

function handleCheckboxClick(event) {
  const target = event.target;
  let rootNode = null;
  
  // 检查当前元素的直接父节点是否为.child1-1-1
  const directParent = target.parentNode;
  if (directParent.classList.contains('child1-1-1')) {
    // 从该父节点向上查找根节点
    rootNode = directParent.closest('#cart-content');
  }
  
  console.log(rootNode);
}

// 绑定点击事件
document.querySelector('.selectAllItem').addEventListener('click', handleCheckboxClick);
document.querySelector('.selectOneItem').addEventListener('click', handleCheckboxClick);

方案二：用closest链式匹配 #

function handleCheckboxClick(event) {
  // 先查找当前元素最近的`.child1-1-1`祖先节点（包括直接父节点）
  const parentContainer = event.target.closest('.child1-1-1');
  let rootNode = null;
  
  if (parentContainer) {
    // 从匹配到的容器节点向上查找根节点
    rootNode = parentContainer.closest('#cart-content');
  }
  
  console.log(rootNode);
}

// 绑定点击事件
document.querySelector('.selectAllItem').addEventListener('click', handleCheckboxClick);
document.querySelector('.selectOneItem').addEventListener('click', handleCheckboxClick);

两种方案都能实现预期效果：只有「Select All」复选框被点击时，才会返回#cart-content节点；「Select One」点击时，rootNode为null。

内容的提问来源于stack exchange，提问作者sam