HTML | DOM 最接近() 方法

在 HTML 和 DOM 中，有一个非常有用的方法叫做 closest()。它可以帮助程序员查找离当前元素最近的符合条件的祖先元素。

语法

element.closest(selector)

• element：当前元素
• selector：要查找的祖先元素的选择器

返回值

方法将返回最接近当前元素的具有指定选择器的祖先元素，如果不存在这样的元素，则返回 null。

用法

假设有以下 HTML 结构：

<ul id="myList">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3
    <ul>
      <li>subitem 1</li>
    </ul>
  </li>
</ul>

我们可以使用 closest() 方法来查找最近的 <ul> 元素，如下所示：

const listItem = document.querySelector('li');
const closestUL = listItem.closest('ul');
console.log(closestUL); // <ul id="myList">...</ul>

同样，我们可以使用该方法从内部元素查找外部元素。例如，我们可以从内嵌的 <li> 元素查找最近的具有类名为 “parent” 的祖先元素：

const nestedElement = document.querySelector('li ul li');
const closestParent = nestedElement.closest('.parent');
console.log(closestParent);

浏览器支持

该方法目前在所有主流浏览器中得到了支持，包括 IE11。您可以在这里查看 caniuse.com 上的兼容性表格。

结语

使用 closest() 方法可以简化通过 DOM 解析和缩小查询范围的过程，让开发者更加便捷和舒适。最好的做法是使用原生 JavaScript 程序，而不是添加许多库和框架。