✏️getBoundingClientRect()

The

Element.getBoundingClientRect()

method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.

Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환한다.

The returned value is a DOMRect object which is the smallest rectangle which contains the entire element, including its padding and border-width. The left, top, right, bottom, x, y, width, and height properties describe the position and size of the overall rectangle in pixels. Properties other than width and height are relative to the top-left of the viewport.

반환 값은 padding과 border-width를 포함해 전체 엘리먼트가 들어있는 가장 작은 사각형인 DOMRect 객체이다. left, top, right, bottom, x, y, width, height 프로퍼티는 전반적인 사각형의 위치와 크기를 픽셀 단위로 나타낸다. width와 height가 아닌 다른 프로퍼티는 뷰포트의 top-left에 상대적이다.

✏️addEventListener()

구문

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

type

수신할 이벤트 유형 (en-US)을 나타내는 대소문자 구분 문자열

listener

지정한 이벤트(Event 인터페이스를 구현한 객체)를 수신할 객체이다. handleEvent() 메서드를 포함하는 객체 또는 JavaScript 함수여야 한다.

options (Optional)

이벤트 수신기의 특징을 지정할 수 있는 객체이다.

useCapture (Optional)

이벤트 대상의 DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에, 이 수신기가 먼저 발동돼야 함을 나타내는 불리언 값이다. 캡처 모드인 수신기는 DOM 트리의 위쪽으로 버블링 중인 이벤트에 의해선 발동하지 않는다. 이벤트 버블링과 캡처링은 조상-자손 관계를 가진 두 개의 요소가 동일한 이벤트 유형에 대한 수신기를 가지고 있을 때, 두 요소에 이벤트가 전파되는 방법을 말한다. 이벤트 전파 모드에 따라 두 요소 중 이벤트를 먼저 수신하는 쪽이 달라진다. 기본 값은 false이다.

The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target. Common targets are Element, or its children, Document, and Window, but the target may be any object that supports events (such as IDBRequest).

EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다. 일반적인 대상은 Element, Document, Window지만 XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체가 대상이 될 수 있다.

✏️classList

The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

Element.classList 는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList (en-US)를 반환하는 읽기 전용 프로퍼티이다.

Using classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className.

classList 사용은 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.

const elementClasses = elementNodeReference.classList;

A DOMTokenList representing the contents of the element's class attribute. If the class attribute is not set or empty, it returns an empty DOMTokenList, i.e. a DOMTokenList with the length property equal to 0.

Element.classList 는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList (en-US)를 반환하는 읽기 전용 프로퍼티이다.

Although the classList property itself is read-only, you can modify its associated DOMTokenList using the add(), remove(), replace(), and toggle() methods.

classList 사용은 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.

method

add( String [, String [, ...]] )

지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

remove( String [, String [, ...]] )

지정한 클래스 값을 제거한다.

item( Number )

콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.

toggle( String [, force] )

하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.

contains( String )

지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

replace( oldClass, newClass )

존재하는 클래스를 새로운 클래스로 교체한다.

⭐Header에 페이지 아래로 스크롤시 다크 스타일링 적용

const header = document.querySelector('.header');
const headerHeight = header.getBoundingClientRect().height;
document.addEventListener('scroll', () => {
    //스크롤 되는 Y좌표가 headerHeight보다 크다면 다른 스타일링!
    if(window.scrollY > headerHeight) {
        header.classList.add('header--dark');
    } else {
        header.classList.remove('header--dark');
    }
})

풀어서 작성

const headerHeight = header.getBoundingClientRect().height;

이 구문을 아래와 같이 풀어서 작성 가능하다.

const header = document.querySelector('.header');
const headerRect = header.getBoundingClientRect();
console.log(headerRect);
const headerHeight = headerRect.height;
console.log(headerHeight);