목차
요소의 크기와 위치 정보
요소의 너비나 높이 값을 알아야 할 때가 있다. 또는 문서에서 요소가 어디에 있는지 알아야 할 때도 있다. 그럴 때는 getBoundingClientRect() 메서드를 사용한다.
const DOMRect = 요소.getBoundingClientRect()
getBoundingClientRect() 메서드로 가져오는 DOM 요소의 Rect 정보는 아래와 같다.
- left (x 값과 같다)
- right
- top (y 값과 같다)
- bottom
- width (right - left)
- height (bottom - top)
DOM 탐색(Traversal)
인접한 요소에서 하나의 다른 요소를 선택하는 것을 DOM 트래버서(Traversal, 탐색)라고 한다. 한 요소에서 다른 요소로 이동할 때 querySelector() 메서드를 사용해서 문서 전체를 탐색하는 것보다 DOM 탐색을 아래, 위, 옆으로 하는 것이 더 효율적이다.
아래로 탐색
아래로 탐색하면 자식(또는 자손) 요소를 선택할 수 있다.
- querySelector(), querySelectorAll() 메서드: document에서 찾는 것보다는 element 단위에서 찾는 것이 더 효율적이다.
- children 속성: 요소의 직계 자식을 선택한다. children 속성은 HTMLCollection(라이브 컬렉션)을 반환해서 forEach() 메서드를 사용하려면 먼저 Array.from()을 사용해서 배열로 복사해야 한다.
- firstElementChild, lastElementChild 속성: 요소의 직계 자식 중 첫 번째나 마지막 요소를 선택한다.
위로 탐색
위로 탐색하면 부모(또는 조상) 요소를 선택할 수 있다.
- parentElement 속성: 요소의 한 단계 위 부모 요소를 선택한다.
- closest() 메서드: 여러 단계 위에 있는 상위 요소를 찾을 때 사용한다. 인수로는 선택자를 전달하고, 전달된 선택자와 일치하는(자신 포함) 가장 가까운 상위 요소를 참조한다.
옆으로 탐색
옆으로 탐색하면 형제 요소를 선택할 수 있다.
- previousElementSibling 속성: 요소의 이전 형제 요소를 선택한다.
- nextElementSibling 속성: 요소의 다음 형제 요소를 선택한다.
- parentElement, children 및 index 조합: 특정 위치의 형제 요소를 선택한다.
오늘 하루를 돌아보며
탭과 캐러셀을 만드는 실습을 진행했다. 지난 주에 오프 캔버스와 모달 다이얼로그를 만들 때보다 무엇을 해야 하는지 조금을 알 것 같았다. 지난 주까지만 하더라도 어디서부터 시작해야 할지, 뭘 해야 할지 머리가 텅 비어버린 것 같았는데, 오늘은 그래도 뭐라도 할 수 있었다. 지난 주보다 성장했다!
탭을 만들 때는 영 감을 못 잡고, 조건을 어떻게 줘야 할지 고민했는데, 강사님과 함께 만들면서 내내 '아, 맞다!'를 반복했다. 그만큼 자바스크립트가 익숙하지 않다는 증거겠지? 그래도 탭을 한 번 만들고 나니 캐러셀을 만들 때는 조금 더 수월했다. 언제 어떤 조건을 줘야 하고, 조건에 따라 어떤 기능을 해야 하는지 감이 잡혔다. 하나씩 천천히 해나갔더니 생각보다 빨리 완성했다!
여전히 부족하고 낯설지만, 자꾸 반복해서 실습하고 연습하면 익숙해질 것이다. 익숙해지면 지금보다 더 빨리 만들 수 있을 것이고, 더 다양한 기능도 수월하게 만들어낼 수 있을 것이다. 매일 매일 성장하는 나를 기대하며 오늘도 힘내자!!!
