[JavaScript] getElement* 와 querySelector

getElement로 시작하는 메서드들과 querySelector는 HTML 페이지에서 주어진 조건에 맞는 요소를 가져옵니다. 

getElement로 시작하는 메서드들을 먼저 소개하자면, 다음과 같습니다.

메서드명	기능	반환 자료형
getElementById(id)	해당 id 값을 가지고 있는 요소를 반환	HTML 요소
getElementsByClassName(names)	해당 class 값을 가지고 있는 요소들을 반환	HTMLCollection
getElementsByName(name)	해당 name 값을 가지고 있는 요소들을 반환	NodeList
getElementsByTagName(name)	해당 태그를 사용하는 요소들을 반환	HTMLCollection
getElementsByTagNameNS(namespace, name)	주어진 namespace에서 해당 태그 명을 사용하는 요소들을 반환	NodeList

 

// getElement* 사용 예시
const blueElements = document.getElementById("blue");
const redElements = document.getElementsByClassName("red1 red2"); // 여러 개의 class 값 설정 가능

 

대략적인 기능은 메서드 이름으로부터 추론할 수 있습니다. 각각의 차이점으로는 Element(단수)와 Elements(복수)가 있습니다. Elements의 경우에도 여러 개의 요소들을 반환하는데, 반환하는 자료형이 다르다는 점에서 차이가 있습니다. 

HTMLCollection과 NodeList는 배열과 유사한 자료형인데, HTMLCollection은 요소들을 동적으로 관리해서 변경되는 부분을 실시간으로 적용합니다. 반대로 NodesList는 요소들을 정적으로 관리해서, 요소들의 변경되는 부분을 실시간으로 감지하지 않습니다. 

 

querySelector() 메서드는 주어진 선택자로 검색을 했을 때 가장 먼저 나오는 요소를 반환합니다. 만약 발견되지 않는다면, null 값을 반환합니다.

querySelectorAll() 메서드는 주어진 선택자에 해당하는 모든 요소들을 NodeList의 형태로 반환합니다. 만약 발견되지 않으면 빈 NodeList를 반환합니다. 

// querySelector 사용 예시
const greenElement = document.querySelector("#green");
const containerClassElements = document.querySelectorAll(".container");