📌 getElement부터 querySelector까지 정리해봄

엘리먼트 셀렉터란 HTML 요소를 선택하고 조작하기 위한 메서드다.
이 메서드들은 모두 DOM(Document Object Model)의 일부로,
HTML 요소를 ID, 클래스명, 태그명 등을 이용해 선택할 수 있다.

또한 querySelector, querySelectorAll이라는 유용한 메서드도 있으며, 각각 단일 요소 또는 여러 요소를 선택할 수 있다.
이 셀렉터들은 선택된 결과로 엘리먼트, HTML 컬렉션, 혹은 노드 리스트를 반환한다.

📌 1. getElementById

가장 기본적인 셀렉터다.
HTML에 <h1 id="my-heading">Food R Us</h1> 라는 요소가 있다고 하자.

const myHeading = document.getElementById("my-heading");

이렇게 선택한 후, 자바스크립트에서 CSS 스타일도 바꿀 수 있다.

myHeading.style.backgroundColor = "yellow";
myHeading.style.textAlign = "center";

주의: CSS 속성을 JavaScript에서 접근할 땐 background-color 대신
backgroundColor처럼 camelCase로 써야 한다.

 

만약 해당 ID가 존재하지 않으면 null이 반환된다.

📌 2. getElementsByClassName

이번에는 클래스명으로 여러 요소를 선택하는 방법이다.
예를 들어 아래와 같은 HTML이 있다고 하자:

<div class="fruits">Apple</div>
<div class="fruits">Orange</div>
<div class="fruits">Banana</div>

자바스크립트에서는 이렇게 선택할 수 있다

const fruits = document.getElementsByClassName("fruits");

이렇게 하면 HTMLCollection이 반환된다. 이건 배열처럼 생겼지만 진짜 배열은 아니며, 메서드가 제한적이다.
요소 하나하나에 접근하려면 인덱스를 써야 한다.

fruits[0].style.backgroundColor = "yellow"; // Apple 강조

반복하려면 for...of 루프를 쓸 수 있다

for (let fruit of fruits) {
  fruit.style.backgroundColor = "yellow";
}

단, HTMLCollection은 forEach 메서드를 지원하지 않는다. 쓰면 에러난다.

해결 방법: Array.from()을 사용해서 진짜 배열로 바꾸면 됨.

Array.from(fruits).forEach(fruit => {
  fruit.style.backgroundColor = "yellow";
});

📌 3. getElementsByTagName

태그명으로도 요소를 선택할 수 있다. 예를 들어 h4, ul, li 등.

const headings = document.getElementsByTagName("h4");

이것도 HTMLCollection을 반환한다. 인덱스로 개별 접근 가능하다:

headings[0].style.backgroundColor = "yellow";

또는 반복문

for (let heading of headings) {
  heading.style.backgroundColor = "yellow";
}

li 요소들도 마찬가지로

const liElements = document.getElementsByTagName("li");

for (let li of liElements) {
  li.style.backgroundColor = "lightgreen";
}

필요하다면 Array.from()으로 배열처럼 바꿔서 forEach 사용 가능하다.

📌 4. querySelector

querySelector는 CSS 선택자 문법을 사용해 가장 첫 번째로 일치하는 요소 하나만 선택한다.

const element = document.querySelector(".fruits");

위 코드는 .fruits 클래스를 가진 요소 중 첫 번째 요소만 반환한다.
h4, ul, li, #id 등 CSS 셀렉터 문법이라면 다 사용할 수 있다.
만약 해당하는 요소가 없으면 null을 반환한다.

📌 5. querySelectorAll

querySelectorAll은 CSS 선택자에 일치하는 모든 요소들을 NodeList로 반환한다.

const fruits = document.querySelectorAll(".fruits");

NodeList는 HTMLCollection과 비슷하지만 **정적(static)**이며, 무엇보다 forEach()를 지원한다.

fruits.forEach(fruit => {
  fruit.style.backgroundColor = "yellow";
});

마찬가지로 li, h4 같은 태그 선택도 가능하다:

const foods = document.querySelectorAll("li");

foods.forEach(food => {
  food.style.backgroundColor = "yellow";
});

✅ 마무리 정리

셀렉터	반환값	특징
getElementById	단일 요소	ID 하나만 선택
getElementsByClassName	HTMLCollection	클래스 전체 선택, 배열 유사
getElementsByTagName	HTMLCollection	태그 전체 선택, 배열 유사
querySelector	단일 요소	CSS 선택자 사용, 첫 번째 요소
querySelectorAll	NodeList	CSS 선택자 사용, 모든 요소, forEach 가능

✏️ 결론

자바스크립트에서 엘리먼트를 선택할 때는 다양한 방법이 있다.
각 메서드마다 반환값의 형태와 특징이 다르기 때문에 목적에 맞게 선택해야 한다.

자주 쓰는 조합: getElementById, querySelectorAll

이 셀렉터들을 잘 이해하면 HTML을 자유자재로 조작할 수 있는 힘이 생긴다.
DOM과 친해지는 첫걸음이 바로 셀렉터라고 생각하면 된다!