요소 객체

선택자 01. document.querySelector()

document.querySelector()는 JavaScript에서 사용되는 DOM(Document Object Model) 요소를 선택하는 메서드 중 하나입니다. 이 메서드를 사용하면 HTML 문서 내에서 특정한 CSS 선택자를 사용하여 요소를 선택할 수 있습니다.

{
    const element = document.querySelector(selector);

    const myElementByClass = document.querySelector('.myClass'); // 클래스
    const myElementById = document.querySelector('#myId'); // 아이디
    const myElementByTag = document.querySelector('div'); // 태그
}

여기서 selector는 CSS 스타일 시트에서 사용하는 선택자와 유사한 형태로 작성됩니다. querySelector()는 해당 선택자로 일치하는 첫 번째 요소를 반환합니다.
또한, querySelector()는 클래스, ID, 태그 이름 등 다양한 유형의 선택자를 사용할 수 있습니다.

선택자 02. document.querySelectorAll()

document.querySelectorAll() 는 HTML 문서 내에서 특정한 CSS 선택자에 해당하는 모든 요소를 선택하는 JavaScript의 메서드입니다. 선택된 요소들은 NodeList 라는 유사 배열 형태의 객체로 반환됩니다.

{
    const elements = document.querySelectorAll(selector);

    const elementsByClass = document.querySelectorAll('.myClass'); // 클래스
    const elementsById = document.querySelectorAll('#myId'); // 아아디
    const elementsByTag = document.querySelectorAll('div'); // 태그
}

여기서 selector는 CSS 스타일 시트에서 사용하는 선택자와 유사한 형태로 작성됩니다. querySelectorAll()은 해당 선택자로 일치하는 모든 요소를 반환합니다.
또한, querySelectorAll()을 사용하면 클래스, ID, 태그 이름 등 다양한 유형의 선택자를 사용할 수 있습니다.

크기 및 위치 09. element.getBoundingClientRect

element.getBoundingClientRect() 메서드는 요소의 크기와 위치에 관한 정보를 제공합니다. 이 메서드는 DOMRect 객체를 반환합니다.

{
    const rect = element.getBoundingClientRect();

    console.log(rect.width);  // 요소의 너비
    console.log(rect.height); // 요소의 높이
    console.log(rect.top);    // 요소의 상단 좌표
    console.log(rect.left);   // 요소의 좌측 좌표
}

DOMRect 객체는 다음과 같은 속성들을 가지고 있습니다:
· x: 요소의 좌상단 모퉁이의 x 좌표
· y: 요소의 좌상단 모퉁이의 y 좌표
· width: 요소의 너비
· height: 요소의 높이
· top: 요소의 상단 좌표
· right: 요소의 우측 좌표
· bottom: 요소의 하단 좌표
· left: 요소의 좌측 좌표

이러한 정보는 보통 요소의 화면상 위치와 크기를 계산하는 데 사용됩니다. 예를 들어, 어떤 요소가 화면에서 어디에 위치하고 있는지 확인하고 싶을 때 유용하게 사용될 수 있습니다.

선택자

텍스트

클래스

크기 및 위치

선택자 01. document.querySelector()

선택자 02. document.querySelectorAll()

크기 및 위치 09. element.getBoundingClientRect