JavaScript .closest() 函数详解：查找祖先元素的利器

JavaScript 函数 .closest() 是 DOM 方法之一，用于找到最接近当前元素的祖先元素（包括自身）。

.closest() 方法接受一个选择器作为参数，它会从当前元素开始向上遍历 DOM 树，直到找到符合选择器条件的最近祖先元素为止。如果找到符合条件的祖先元素，则返回该元素；如果未找到符合条件的祖先元素，则返回 null。

例如，假设有如下 HTML 结构：

<div class='grandparent'>
  <div class='parent'>
    <div class='child'></div>
  </div>
</div>

我们可以使用 .closest() 方法来查找 class 为 'grandparent' 的祖先元素：

const childElement = document.querySelector('.child');
const grandparentElement = childElement.closest('.grandparent');
console.log(grandparentElement); // 输出 <div class='grandparent'>

在上面的例子中，我们首先使用 document.querySelector() 方法找到 class 为 'child' 的元素。然后，我们使用 .closest() 方法查找 class 为 'grandparent' 的祖先元素，最终得到 div 元素的引用。

.closest() 方法的特点是它会在遍历 DOM 树时跳过不符合选择器条件的元素，直到找到符合条件的祖先元素为止。这样可以提高查找效率，尤其是当 DOM 树很复杂时。

需要注意的是，.closest() 方法是在 DOM 元素上调用的，因此只能在具体的元素上使用，而不能在 NodeList 或 HTMLCollection 等集合上使用。如果要查找多个元素的祖先元素，可以使用其他方法，如遍历或使用父元素的选择器。

最后，值得一提的是 .closest() 方法是 ES6 新增的方法，在一些旧版本的浏览器中可能不支持。如果需要兼容旧版本浏览器，可以使用其他方法来实现类似的功能。