能否用JavaScript的Element.closest()检查多个祖先以简化冗长代码？

当然可以！Element.closest() 就是专门为解决这类多层DOM祖先检查问题而生的API，比你现在写的冗长条件判断简洁太多，甚至比手动写递归实现更省心高效。

它的工作逻辑特别贴合你的需求：从触发事件的元素（也就是e.target）开始，向上遍历整个DOM树（包括元素自身），直到找到第一个匹配指定CSS选择器的元素；如果遍历到<body>都没找到匹配项，就返回null。

替换后的极简代码 #

你原来的冗长判断：

if ( (e.target.parentNode.classList[0] === 'my-class') || (e.target.parentNode.parentNode.classList[0] === 'my-class') || (e.target.parentNode.parentNode.parentNode.classList[0] === 'my-class') ) { 
  /* [... CODE HERE...] */ 
}

可以直接替换成这一行：

if (e.target.closest('.my-class')) {
  /* [... CODE HERE...] */
}

额外实用细节 #

• 灵活的选择器支持：closest()接受任何有效的CSS选择器，不只是类选择器。比如你要找带特定ID的祖先，或者特定标签+类的组合，写#my-id、section.card这类选择器就行，适配各种场景。
• 自动边界处理：它会自动在<body>节点停止遍历，完全不需要你手动写终止条件（比如判断是否到了<body>再停止递归），省去了很多潜在的bug。
• 可选排除自身：如果你的业务逻辑不需要匹配e.target本身，只需要检查祖先节点，可以加个简单的判断：

  const targetAncestor = e.target.closest('.my-class');
  if (targetAncestor && targetAncestor !== e.target) {
    /* 只处理祖先节点的逻辑 */
  }
  

不管你以后需要检查3层还是5层祖先，这行代码都不需要修改——closest()会帮你完成所有向上遍历的工作，彻底告别堆砌parentNode的冗余代码。

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