JavaScript closest()方法详解|极客笔记

JavaScript closest()方法详解

一、概述

在编写 JavaScript 代码时，经常会遇到需要找到与某个元素最接近的父级元素的情况。为了解决这个问题，JavaScript 提供了 closest() 方法。该方法可以从当前元素开始，沿着 DOM 树逐级向上查找，直到找到符合指定选择器条件的最接近父级元素。

closest() 方法返回与给定选择器匹配的最接近的祖先元素。如果当前元素本身符合选择器条件，该元素则会被返回。如果没有找到匹配的祖先元素，则返回 null。

closest() 方法是 DOM API 的一部分，可以在所有支持 DOM 操作的现代浏览器中使用。

二、语法

closest() 方法的语法如下：

element.closest(selectors)

element：表示当前元素，即从当前元素开始查找。
selectors：一个字符串参数，指定了一个或多个选择器，用于匹配符合条件的最接近的祖先元素。该参数可以是类名、id、标签名等合法的 CSS 选择器。

三、使用示例

下面我们通过一些示例代码来演示 closest() 方法的使用情况。

3.1 查找最接近的父级元素

假设我们有以下 HTML 结构：

<div class="outer">
  <div class="inner">
    <p>Hello, World!</p>
  </div>
</div>

我们想要给 <p> 元素添加一个点击事件，并在点击时找到最接近的父级元素 <div class="outer">。代码如下所示：

const paragraph = document.querySelector('p');

paragraph.addEventListener('click', function() {
  const closestDiv = paragraph.closest('.outer');

  closestDiv.style.backgroundColor = 'red';
});

运行结果：在点击 <p> 元素后，最接近的父级元素 <div class="outer"> 的背景颜色将变为红色。

3.2 查找最接近的祖先元素

如果我们有一个嵌套的列表，并希望在点击列表项时找到最接近的祖先 <ul> 元素，并将其文本颜色更改为蓝色，可以使用以下代码：

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

const listItems = document.querySelectorAll('li');

listItems.forEach(function(item) {
  item.addEventListener('click', function() {
    const closestUl = item.closest('ul');

    closestUl.style.color = 'blue';
  });
});

运行结果：在点击任何一个列表项后，最接近的祖先 <ul> 元素中的文本颜色将变为蓝色。

3.3 处理不存在祖先元素的情况

在某些情况下，我们需要处理没有符合选择器条件的祖先元素存在的情况。可以通过判断 closest() 方法返回的结果是否为 null 来实现。

例如，我们希望为列表项 <li> 添加一个删除按钮，点击该按钮时删除整个列表项，同时也可以通过 closest() 方法找到最接近的祖先 <ul> 元素。代码如下：

<ul>
  <li>Item 1 <button class="delete">X</button></li>
  <li>Item 2 <button class="delete">X</button></li>
  <li>Item 3 <button class="delete">X</button></li>
</ul>

const deleteButtons = document.querySelectorAll('.delete');

deleteButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    const closestUl = button.closest('ul');

    if (closestUl !== null) {
      closestUl.removeChild(button.parentNode);
    }
  });
});

运行结果：在点击删除按钮后，最接近的祖先 <ul> 元素中的相应列表项将被成功移除。