<div data-display-name='apple' data-index='1'></div>
dataset을 통해 data 속성명을 가져올 수 있음
document.querySelector('div[data-display-name="apple"');
document.querySelector('div[data-index="1"');
dataset; // { "index": "1", "displayName": "apple"}
dataset.index; // 1
dataset.displayName; // apple
getBoundingClientRect
해당 요소의 크기, 좌표 등을 지니고 있는 객체를 반환하는 메소드. 'x, y, width, height, left, right, top, bottom'이 반환된다
navbar.getBoundingClientRect().height // navbar의 길이가 반환됨
scrollIntoView
스크롤 이동
scrollIntoView('아이디명or클래스명'or변수명)
window.scrollY / window.scrollX
map()
배열의 반복문
sectionIds.map((id) => document.querySelector(id))
// sectionIds의 배열값을 순서대로 실행
// 위의 경우에는 id(각 배열값)에 id(각 배열값)라는 id명을 가진 태그를 순서대로 배열로 삽입
classList
클래스명 추가 / 삭제
navbar.classList.add('navbar--bold'); // navbar에 navbar--bold라는 클래스명을 부여
navbar.classList.remove('navbar--bold'); // navbar에 navbar--bold라는 클래스명을 제거
navbarMenu.classList.toggle('open');
// navbarMenu에 open 클래스가 있으면 추가, 없으면 제거
Observer
isIntersecting
threshold
rootMargin
root
😣 **IntersectionObserver(콜백함수, 옵션)**
DOM 엘리먼트가 뷰포트상에 노출되었는지 여부를 비동기적으로 감시하는 API
🎈 화면상에 존재하는 모든 이미지를 한번에 불러오면, 불필요한 네트워크 비용이 증가하고 이로 인해 사용자 경험을 저하 시킬 수 있다. 때문에 현재 화면에 보이는 이미지만 선별적으로 로딩하는 기법이 필요하다.
기존에는 대상 이미지 또는 엘리먼트가 뷰포트 내에 존재하는지 유무를 판별하기 위해 element.getBoundingClientRect 함수를 이용했으나 이 경우 reflow가 발생하여 과부하 될 수 있다