JavaScript最近距離（）方法的實際用例

厭倦了JavaScript的父節點遍歷挑戰？找到合適的祖先元素可能很棘手，尤其是在深層嵌套或動態的HTML結構中。讓我們探討closest()方法如何簡化此過程。

考慮此HTML片段：

<div data-id="123">
  點擊我
</div>

使用parentNode直接獲取data-id在按鈕之後：

 const button = document.queryselector（“ button”）;
button.AddeventListener（“單擊”，（EVT）=> {
  console.log（evt.target.parentnode.dataset.id）; //打印“ 123”
}）;

但是，這種方法失敗了，築巢更複雜：

<div data-id="123">
  <div>
    <h1 id="一些標題">一些標題</h1>
    <button>點擊我</button>
  </div>
</div>

鏈接多次parentNode是繁瑣且無法實現的。循環while涉及的較舊的解決方案：

函數getParentNode（el，tagName）{
  while（el && el.parentnode）{
    el = el.parentnode;
    if（el && el.tagname === tagname.touppercase（））{
      返回el;
    }
  }
  返回null;
}

功能性雖然不靈活，並且不處理超越標籤名稱的選擇器。 jQuery的.closest()提供了一個出色的解決方案，但是為單個功能添加庫通常是過度的。

輸入Element.closest()

本地Element.closest()方法提供了一個優雅的解決方案：

 const button = document.queryselector（“ button”）;
console.log（button.closest（“ div”））; //返回<div> 元素<p><code>closest()</code>向上遍歷DOM，直到找到符合提供的選擇器的祖先為止。此選擇器可以是任何有效的CSS選擇器：ID，類，屬性或標籤名稱。</p>
<pre class="brush:php;toolbar:false"> element.closest（“＃my-id”）; //工作
element.closest（“。my-class”）; //工作
element.closest（“ [data-id]”）; //工作

如果找不到匹配的祖先， closest()返回null 。這使有條件的檢查變得容易：

 const button = document.queryselector（“ button”）;
if（button.closest（“。my-class”））{
  console.log（“找到！”）;
} 別的 {
  console.log（“找不到！”）;
}

現實世界應用

1. 下拉次數：檢測到下拉菜單外的單擊以關閉它：

 // ...（事件處理代碼）...
如果（！evt.target.closest（“。菜單dropdown”））{
  //關閉下拉
}

2. 表：與這些行中的按鈕交互時，從表行中檢索數據屬性：

功能getUserid（target）{
  返回target.closest（“ [data-userid]”）。 dataset.userid;
}

3. 反應表：與上述相似，但在一個反應​​組件中：

功能handleclick（evt）{
  const userId = evt.currenttarget.closest（“ [data-userid]”）。 dataset.userid;
  // ...
}

4. 模態：單擊模式內容外關閉模式：

 // ...（事件處理代碼）...
如果（！evt.target.closest（“。modal-inner”））{
  //關閉模態
}

瀏覽器支持

Element.closest()享有出色的瀏覽器支持，不包括舊版本的Internet Explorer。這使其成為大多數項目的安全可靠選擇。

Element.closest()提供了一種簡潔有效的方法來導航DOM層次結構，從而消除了許多常見場景中對複雜循環或外部庫的需求。它的多功能性和廣泛的瀏覽器支持使其成為任何JavaScript開發人員的寶貴工具。