What I Learned Today
때로는 요소의 크키, 위치 정보를 알아야 할 때가 있다.
또는 문서 요소에서 어디에 위치해있는지 알아야 할 때도 있다.
이런 경우 getBoundingClientRect() 메서드를 사용한다.
getBoundingClientRect() 메서드는 뷰포트에서 요소까지 거리를 픽셀 단위로 변환해준다.
// 이런식으로 사용하면 된다.
const DOMRect = 요소.getBoundingClientRect()
DOMRect.가져올정보
DOM 탐색 (Traversal)은 인접한 요소에서 하나의 다른 요소를 선택하는 것이다.
- DOM 탐색의 방법
- 아래로 탐색 (자식 또는 자손 요소)
- querySelector() - 특정 요소에서 아래쪽 방향으로 탐색
- querySelectorAll() - 특정 요소에서 아래쪽 방향으로 탐색 (결과가 NodeList로 반환 - 스태틱 콜렉션)
- children - 요소의 직계 자식을 선택할 때 (결과가 HTML 요소의 집합으로 나옴 - 라이브 콜렉션)
- firstelementChild, lastElementChild - 첫번째, 마지막 인덱스 항목을 선택할 수 있는 방법
- 위로 탐색 (요소의 부모 요소)
- parentElement - 요소의 부모 요소를 가리킨다.
- closest(선택자) - 메서드에 전달된 선택자와 일치하는 가장 가까운 상위 요소를 참조
- 옆으로 탐색 (요소의 형제 요소)
- previousElementSibling - 요소의 이전 형제 요소를 선택할 때 사용
- netxElementSibling - 요소의 다음 형제 요소를 선택할 때 사용
- 아래로 탐색 (자식 또는 자손 요소)
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
점점 많은 실습을 하는데 블로그에 어떻게 담아야할지 고민이 된다...
그리고 회고조에서 새로운 프로젝트를 하기로했다 !
반응형
