JavaScript의 가장 가까운 () 메소드에 대한 실제 사용 사례

JavaScript의 부모 노드 트래버스 문제에 지쳤습니까? 오른쪽 조상 요소를 찾는 것은 까다로울 수 있습니다. 특히 깊게 중첩되거나 동적 인 HTML 구조에서는 까다로울 수 있습니다. closest() 메소드 가이 프로세스를 단순화하는 방법을 살펴 보겠습니다.

이 HTML 스 니펫을 고려하십시오.

<div data-id="123">
  나를 클릭하십시오
</div>

버튼 클릭 후 data-id 얻는 것은 parentNode 사용하여 간단합니다.

 const button = document.querySelector ( "버튼");
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 el;
    }
  }
  널 리턴;
}

기능적이지만 이것은 융통성이 없으며 태그 이름을 넘어서 선택기를 처리하지 않습니다. jQuery의 .closest() 우수한 솔루션을 제공했지만 단일 기능에 라이브러리를 추가하는 것은 종종 과잉입니다.

Element.closest() 입력하십시오.

기본 Element.closest() 메소드는 우아한 솔루션을 제공합니다.

 const button = document.querySelector ( "버튼");
console.log (button.closest ( "div")); // 반환합니다<div> 요소<p> <code>closest()</code> 제공된 선택기와 일치하는 조상이 발견 될 때까지 DOM을 위쪽으로 가로 지릅니다. 이 선택기는 유효한 CSS 선택기 (ID, 클래스, 속성 또는 태그 이름 일 수 있습니다.</p>
<pre class="brush:php;toolbar:false"> 요소 .Closest ( "#my-id"); // 작동합니다
요소 .closest ( ". my-class"); // 작동합니다
요소 .Closest ( "[data-id]"); // 작동합니다

일치하는 조상이없는 경우 closest() null 반환합니다. 이것은 조건부 점검을 쉽게 만듭니다.

 const button = document.querySelector ( "버튼");
if (button.closest ( ". my-class")) {
  Console.log ( "발견!");
} 또 다른 {
  Console.log ( "찾을 수 없다!");
}

실제 응용 프로그램

1. 드롭 다운 : 드롭 다운 메뉴 외부의 클릭을 감지하여 닫습니다.

 // ... (이벤트 처리 코드) ...
if (! evt.target.closest ( ". Menu-Dropdown") {
  // 드롭 다운을 닫습니다
}

2. 테이블 : 해당 행 내 버튼과 상호 작용할 때 테이블 행에서 데이터 속성을 검색합니다.

 함수 getUserId (target) {
  return target.closest ( "[data-userid]"). DataSet.userId;
}

3. 반응 테이블 : 위와 유사하지만 반응 구성 요소 내에서 :

 기능 핸드 클릭 (EVT) {
  const userId = evt.currentTarget.closest ( "[data-userid]"). dataSet.userid;
  // ...
}

4. 모달 : 모달 콘텐츠 외부를 클릭 할 때 모달을 닫습니다.

 // ... (이벤트 처리 코드) ...
if (! evt.target.closest ( ". modal-inner")) {
  // 모달을 닫습니다
}

브라우저 지원

Element.closest() 이전 버전의 Internet Explorer를 제외한 우수한 브라우저 지원을 즐깁니다. 이것은 대부분의 프로젝트에서 안전하고 안정적인 선택입니다.

Element.closest() DOM 계층을 탐색하는 간결하고 효율적인 방법을 제공하여 많은 일반적인 시나리오에서 복잡한 루프 또는 외부 라이브러리가 필요하지 않습니다. 다목적 성과 광범위한 브라우저 지원으로 모든 JavaScript 개발자에게 귀중한 도구가됩니다.