前言

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

什么是 closest 方法？

closest() 方法返回當(dāng)前元素（element）及其祖先元素中，最先匹配指定選擇器的元素。如果沒(méi)有任何元素匹配，closest() 將返回 null。

語(yǔ)法

element.closest(selector);

• selector: 一個(gè)字符串，指定 CSS 選擇器，用來(lái)匹配祖先元素。如果指定的 selector 匹配當(dāng)前元素本身，它也會(huì)被返回。
• 返回值：返回一個(gè) DOM 元素對(duì)象，表示與當(dāng)前元素匹配的最接近的祖先元素。如果沒(méi)有匹配的元素，返回 null。

如何使用 closest 方法？

closest() 方法的工作原理是：從當(dāng)前元素開(kāi)始，向上查找，直到找到第一個(gè)符合條件的祖先元素（包括自己）。如果沒(méi)有找到符合條件的元素，它會(huì)返回 null。

示例 1：基本使用

<div class="parent">
  <div class="child">
    <button id="btn">Click Me</button>
  </div>
</div>

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

在這個(gè)例子中，按鈕元素 (#btn) 通過(guò) closest('.child') 查找并返回它的最近父級(jí)元素（.child）。

示例 2：查找當(dāng)前元素本身

<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>

在這個(gè)例子中，myElement.closest('.child') 返回 myElement 本身，因?yàn)樗旧矸?nbsp;.child 選擇器。

示例 3：沒(méi)有匹配的元素

<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>

在這個(gè)例子中，按鈕元素 (#btn) 上沒(méi)有 .nonexistent 類，所以 closest() 返回 null。

closest() 方法的應(yīng)用場(chǎng)景

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

  例如，假設(shè)你在一個(gè)列表中有多個(gè) li 元素，你想通過(guò)點(diǎn)擊某個(gè) li 來(lái)執(zhí)行某些操作，可以使用 closest() 來(lái)找到最近的 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>
  

  在這個(gè)例子中，點(diǎn)擊任意的 li 元素，都會(huì)找到最近的 li 元素并打印出它的文本內(nèi)容。即使你點(diǎn)擊的是 ul 內(nèi)的嵌套元素（比如圖片或文字），closest() 仍能找到對(duì)應(yīng)的 li 元素。

• 動(dòng)態(tài)內(nèi)容：
  當(dāng)你有動(dòng)態(tài)生成的內(nèi)容時(shí)，傳統(tǒng)的事件綁定可能會(huì)失效，因?yàn)樾绿砑拥脑貨](méi)有綁定事件。通過(guò) closest()，你可以確保事件正確綁定到父元素，從而避免了這種問(wèn)題。

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

  <div class="container">
    <div class="content">
      <button class="action">Click Me</button>
    </div>
  </div>
  
  <script>
    const container = document.querySelector('.container');
  
    // 動(dòng)態(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>
  

  在這個(gè)示例中，closest() 允許我們處理新動(dòng)態(tài)生成的按鈕，因?yàn)槭录窃诟冈?nbsp;.container 上綁定的。

需要注意的事項(xiàng)

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

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

• 返回 null 時(shí)的處理：
  當(dāng)沒(méi)有找到匹配的祖先元素時(shí)，closest() 會(huì)返回 null。因此，在使用時(shí)，建議檢查返回值，以防出現(xiàn)錯(cuò)誤。

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

總結(jié)

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

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

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

最新評(píng)論