JavaScript中的closest方法示例详解_Javascript

前言

在javascript中，closest() 是一个非常实用的 dom 方法，它可以帮助我们从某个 dom 元素出发，查找最近的符合条件的祖先元素。这个方法非常适合在事件委托和元素查找方面使用，尤其是在处理动态内容或事件时。

什么是 closest 方法？

closest() 方法返回当前元素（element）及其祖先元素中，最先匹配指定选择器的元素。如果没有任何元素匹配，closest() 将返回 null。

语法

element.closest(selector);

selector: 一个字符串，指定 css 选择器，用来匹配祖先元素。如果指定的 selector 匹配当前元素本身，它也会被返回。
返回值：返回一个 dom 元素对象，表示与当前元素匹配的最接近的祖先元素。如果没有匹配的元素，返回 null。

如何使用 closest 方法？

closest() 方法的工作原理是：从当前元素开始，向上查找，直到找到第一个符合条件的祖先元素（包括自己）。如果没有找到符合条件的元素，它会返回 null。

示例 1：基本使用

<div class="parent">
  <div class="child">
    <button id="btn">click me</button>
  </div>
</div>

<script>
  const btn = document.getelementbyid('btn');
  
  // 查找最近的父级元素（匹配 class="child"）
  const closestdiv = btn.closest('.child');
  
  console.log(closestdiv);  // 打印 .child 元素（<div class="child">...</div>）
</script>

在这个例子中，按钮元素 (#btn) 通过 closest('.child') 查找并返回它的最近父级元素（.child）。

示例 2：查找当前元素本身

<div class="parent">
  <div class="child" id="myelement">hello world</div>
</div>

<script>
  const myelement = document.getelementbyid('myelement');
  
  // 查找自身元素（元素本身匹配 selector）
  const closestself = myelement.closest('.child');
  
  console.log(closestself);  // 打印 #myelement 元素（<div class="child" id="myelement">hello world</div>）
</script>

在这个例子中，myelement.closest('.child') 返回 myelement 本身，因为它本身符合 .child 选择器。

示例 3：没有匹配的元素

<div class="parent">
  <div class="child">
    <button id="btn">click me</button>
  </div>
</div>

<script>
  const btn = document.getelementbyid('btn');
  
  // 查找最近的祖先元素（匹配 .nonexistent）
  const closestnonexistent = btn.closest('.nonexistent');
  
  console.log(closestnonexistent);  // 输出 null
</script>

在这个例子中，按钮元素 (#btn) 上没有 .nonexistent 类，所以 closest() 返回 null。

closest() 方法的应用场景

事件委托：
事件委托是一种常见的技术，用于将事件监听器附加到父元素，而不是直接附加到每个子元素。这可以减少内存使用，并提高性能。当我们处理事件时，常常需要知道事件目标的祖先元素，这时 closest() 就非常有用。

例如，假设你在一个列表中有多个 li 元素，你想通过点击某个 li 来执行某些操作，可以使用 closest() 来找到最近的 li 元素。
```
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<script>
  document.queryselector('ul').addeventlistener('click', function(event) {
    const listitem = event.target.closest('li');
    if (listitem) {
      console.log('you clicked on: ' + listitem.textcontent);
    }
  });
</script>
```
在这个例子中，点击任意的 li 元素，都会找到最近的 li 元素并打印出它的文本内容。即使你点击的是 ul 内的嵌套元素（比如图片或文字），closest() 仍能找到对应的 li 元素。

动态内容：
当你有动态生成的内容时，传统的事件绑定可能会失效，因为新添加的元素没有绑定事件。通过 closest()，你可以确保事件正确绑定到父元素，从而避免了这种问题。

例如，假设你动态添加了一个按钮，点击该按钮时，我们想要找到它的父容器：

<div class="container">
  <div class="content">
    <button class="action">click me</button>
  </div>
</div>

<script>
  const container = document.queryselector('.container');

  // 动态添加内容
  const newbutton = document.createelement('button');
  newbutton.classlist.add('action');
  newbutton.textcontent = 'click me';

  container.queryselector('.content').appendchild(newbutton);

  // 事件委托
  container.addeventlistener('click', function(event) {
    const btn = event.target.closest('.action');
    if (btn) {
      console.log('button clicked:', btn.textcontent);
    }
  });
</script>

在这个示例中，closest() 允许我们处理新动态生成的按钮，因为事件是在父元素 .container 上绑定的。

需要注意的事项

closest() 查找的是最近的祖先元素：
它会从当前元素开始向上查找，直到它找到匹配的祖先元素。如果当前元素本身满足选择器条件，它也会被返回。
closest() 只会查找元素的祖先链条：
它不会向下查找子元素。如果你需要向下查找子元素，可以使用 queryselector() 等方法。
返回 null 时的处理：
当没有找到匹配的祖先元素时，closest() 会返回 null。因此，在使用时，建议检查返回值，以防出现错误。
```
const result = element.closest('.target');
if (result !== null) {
  // 执行一些操作
} else {
  console.log('没有找到匹配的祖先元素');
}
```