前言

在JavaScript中，closest() 是一個非常實用的 DOM 方法，它可以幫助我們從某個 DOM 元素出發(fā)，查找最近的符合條件的祖先元素。這個方法非常適合在事件委托和元素查找方面使用，尤其是在處理動態(tài)內(nèi)容或事件時。

什么是 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() 方法的應(yīng)用場景

• 事件委托：
  事件委托是一種常見的技術(shù)，用于將事件監(jiān)聽器附加到父元素，而不是直接附加到每個子元素。這可以減少內(nèi)存使用，并提高性能。當我們處理事件時，常常需要知道事件目標的祖先元素，這時 closest() 就非常有用。

  例如，假設(shè)你在一個列表中有多個 li 元素，你想通過點擊某個 li 來執(zhí)行某些操作，可以使用 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 元素并打印出它的文本內(nèi)容。即使你點擊的是 ul 內(nèi)的嵌套元素（比如圖片或文字），closest() 仍能找到對應(yīng)的 li 元素。

• 動態(tài)內(nèi)容：
  當你有動態(tài)生成的內(nèi)容時，傳統(tǒng)的事件綁定可能會失效，因為新添加的元素沒有綁定事件。通過 closest()，你可以確保事件正確綁定到父元素，從而避免了這種問題。

  例如，假設(shè)你動態(tài)添加了一個按鈕，點擊該按鈕時，我們想要找到它的父容器：

  <div class="container">
    <div class="content">
      <button class="action">Click Me</button>
    </div>
  </div>
  
  <script>
    const container = document.querySelector('.container');
  
    // 動態(tài)添加內(nèi)容
    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() 允許我們處理新動態(tài)生成的按鈕，因為事件是在父元素 .container 上綁定的。

需要注意的事項

• closest() 查找的是最近的祖先元素：
  它會從當前元素開始向上查找，直到它找到匹配的祖先元素。如果當前元素本身滿足選擇器條件，它也會被返回。

• closest() 只會查找元素的祖先鏈條：
  它不會向下查找子元素。如果你需要向下查找子元素，可以使用 querySelector() 等方法。

• 返回 null 時的處理：
  當沒有找到匹配的祖先元素時，closest() 會返回 null。因此，在使用時，建議檢查返回值，以防出現(xiàn)錯誤。

  const result = element.closest('.target');
  if (result !== null) {
    // 執(zhí)行一些操作
  } else {
    console.log('沒有找到匹配的祖先元素');
  }
  

總結(jié)

closest() 是一個非常強大的 DOM 方法，它使得在查找祖先元素時變得更加高效。它不僅適用于事件委托，還可以幫助你在處理復(fù)雜的 DOM 結(jié)構(gòu)時輕松找到元素的祖先。在動態(tài)內(nèi)容和復(fù)雜的 DOM 交互中，closest() 也是一種非常便捷的工具。

通過掌握 closest() 方法，開發(fā)者可以更加靈活地操作 DOM 元素，并提高代碼的可維護性和性能。

到此這篇關(guān)于JavaScript中closest方法詳解的文章就介紹到這了,更多相關(guān)JS中closest方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論