후유증으로 몸상태가 많이 안좋지만.. 내일 프론트 튜터님과의 멘토링이 있는데 아무것도 안해갈 수는 없는 터라 덜덜 떨리는 손으로 어떻게 타자를 쳐서 무언가를 하긴 했다.
물론 완성도면에선 형편 없고 수정해야 할 부분은 훨씬 많지만 계속해서 코딩을 한줄이라도 매일 적고 더 나은 코드를 위해 노력해 보는 게 개발자로서 평생 가져야할 본분이 아닐까 싶다.
물론 건강이 먼저고 최고니 쉴 땐 푹 쉬자.
너무 무리하지 않는 선에서 했고 며칠동안 잠도 자기 힘들정도로 컨디션이 급 나빠진 강행군이었으니 어쩔 수 없었다.
아무튼 할 때마다 새로운 걸 알아가는데
closest()
Elemet의 closest() 메서드는 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다.
-
closest(selectors)
매개변수로 들어가는 selectors 는 Element와 그 조상 요소들에 테스트할, 유효한 CSS 선택자 문자열이다. -
반환값
selectors에 일치하는 가장 가까운 조상 Element또는 자기 자신, 일치하는 요소가 없으면 null
※ 예외로 selectors가 유효한 CSS선택자가 아니면 발생
SyntaxError DOMException (en-US)
EX)
HTML
<article>
<div id="div-01">Here is div-01
<div id="div-02">Here is div-02
<div id="div-03">Here is div-03</div>
</div>
</div>
</article>Javascript
const el = document.getElementById('div-03');
// ID가 "div-02"인 가장 가까운 조상
console.log(el.closest('#div-02')); // <div id="div-02">
// div 안에 놓인 div인 가장 가까운 조상
console.log(el.closest('div div')); // <div id="div-03">
// div면서 article을 부모로 둔 가장 가까운 조상
console.log(el.closest("article > div")); // <div id="div-01">
// div가 아닌 가장 가까운 조상
console.log(el.closest(":not(div)")); // <article>children()
자식 요소에 접근 -> 현재 요소의 자식 요소가 포함된 HTMLCollection을 반환한다.비 요소 노드는 모두 제외
※ childNodes
TIL에서 다룬 적이 있는데 현재 요소의 자식 노드가 포한된 NodeList를 반환한다. 이때 반환되는 NodeList에는 주석 노드와 같은 비요소 노드까지 포함된다.
0: text 1:comment 2:text <- 이런식으로 말이다.
children은 childNodes와는 달리 비요소 노드를 제외하고 요소만 반환하니 좀 더 효율적으로 찾을 수 있었다. 상단의 예시에서 비요소인 text는 제외되고 0:comment만 반환하게 된다.
