자바스크립트 closest 메소드

Q.자바스크립트에서, closest 메소드는 자기 상위 요소를 찾는거야, 아니면 자기 주변 요소를 찾는거야?

A.자바스크립트에서 closest 메소드는 자기 자신을 포함하여 상위 요소를 찾는 메소드입니다.

상위 요소: 현재 요소를 감싸고 있는 부모 요소, 그 부모의 부모 요소 등을 말합니다.
CSS 선택자: closest 메소드는 인자로 CSS 선택자를 받습니다. 이 선택자와 일치하는 가장 가까운 상위 요소를 찾습니다.
자기 자신 포함: 만약 현재 요소 자체가 주어진 선택자와 일치한다면, closest 메소드는 자기 자신을 반환합니다.

예시

HTML

텍스트 내용

const paragraph = document.querySelector('.paragraph');

const closestSection = paragraph.closest('.section');
console.log(closestSection); //

...

요소를 출력

const closestContainer = paragraph.closest('.container');
console.log(closestContainer); //

...

요소를 출력

const closestParagraph = paragraph.closest('.paragraph');
console.log(closestParagraph); //

...

요소 자신을 출력

결론:

closest 메소드는 자바스크립트에서 특정 요소의 상위 요소 중에서 CSS 선택자와 일치하는 가장 가까운 요소를 찾는 데 유용한 메소드입니다.