JS(7). DOM(2). DOM 요소 선택방법

1. document.querySelector()

사용법:

• CSS 선택자를 사용해서 하나의 요소를 선택.
• 조건에 맞는 첫 번째 요소를 반환.

언제 사용?

 

• CSS 선택자를 쓸 수 있는 유연한 선택이 필요할 때.
• ID, 클래스, 태그 등을 하나의 메서드로 통합적으로 선택하고 싶을 때.

 

// ID 선택
const el1 = document.querySelector("#myId"); // <div id="myId"></div>

// 클래스 선택
const el2 = document.querySelector(".myClass"); // <div class="myClass"></div>

// 태그 선택
const el3 = document.querySelector("p"); // 첫 번째 <p> 태그

2. document.querySelectorAll()

사용법:

• CSS 선택자를 사용해서 여러 요소를 선택.
• 조건에 맞는 모든 요소를 반환하며, 결과는 NodeList 형태로 제공.

언제 사용?

• 여러 요소를 한꺼번에 선택해야 할 때.
• 특정 클래스나 태그를 가진 모든 요소를 가져오고 싶을 때.

const elements = document.querySelectorAll(".myClass"); // 모든 .myClass 요소
elements.forEach(el => console.log(el)); // 각각의 요소를 순회

3. document.getElementById()

사용법:

• 특정 ID를 가진 요소를 선택.

언제 사용?

• 요소의 ID가 고유할 때(HTML 문서에서 ID는 유일해야 함).
• 특정 ID를 빠르게 찾고 싶을 때.

const el = document.getElementById("myId"); // <div id="myId"></div>

4. document.getElementsByClassName()

사용법:

• 특정 클래스를 가진 모든 요소를 선택.
• 결과는 HTMLCollection 형태로 제공.

언제 사용?

• 특정 클래스를 가진 요소를 가져오고 싶을 때.
• 성능이 중요하고, CSS 선택자 없이 클래스로만 선택하고 싶을 때.

const elements = document.getElementsByClassName("myClass"); // 모든 .myClass 요소
for (let el of elements) {
    console.log(el); // 각각의 요소를 순회
}

5. document.getElementsByTagName()

사용법:

• 특정 태그를 가진 모든 요소를 선택.
• 결과는 HTMLCollection 형태로 제공.

언제 사용?

• 특정 태그를 가진 모든 요소를 가져오고 싶을 때.
• HTMLCollection을 순회하며 빠르게 처리하려고 할 때.

const paragraphs = document.getElementsByTagName("p"); // 모든 <p> 태그
for (let p of paragraphs) {
    console.log(p);
}

비교 정리

메서드반환값설명예시

document.querySelector()	단일 요소	CSS 선택자를 사용해 첫 번째 요소	#id, .class, div p
document.querySelectorAll()	NodeList	CSS 선택자를 사용해 모든 요소 선택	div > p, .class
document.getElementById()	단일 요소	특정 ID를 가진 요소 선택	"myId"
document.getElementsByClassName()	HTMLCollection	특정 클래스를 가진 모든 요소 선택	"myClass"
document.getElementsByTagName()	HTMLCollection	특정 태그를 가진 모든 요소 선택	"div", "p"

언제 어떤 걸 써야 할까?

1. CSS 선택자를 사용하고 싶다면
   • querySelector나 querySelectorAll을 사용해.
   • 직관적이고 유연하지만, 약간 더 느릴 수 있음.
2. ID로 빠르게 찾고 싶다면
   • getElementById를 사용해.
   • 가장 빠르고 간단하지만, ID는 유일해야 함.
3. 클래스나 태그를 기반으로 여러 요소를 찾고 싶다면
   • getElementsByClassName 또는 getElementsByTagName을 사용해.
   • HTMLCollection을 반환하므로, 성능이 더 좋음.

추가 팁: NodeList vs. HTMLCollection

• querySelectorAll():
  • 반환값: NodeList (배열과 유사, forEach 사용 가능).
• getElementsByClassName() / getElementsByTagName():
  • 반환값: HTMLCollection (배열과 유사하지만 forEach 사용 불가)

결론

• 어떤 메서드를 사용할지는 **선택 기준(유연성, 성능, 편의성)**에 따라 다르지만,
  querySelector와 querySelectorAll이 가장 유연해서 요즘 가장 많이 쓰여.
• 하지만 ID로 찾는 건 무조건 getElementById가 더 간단하고 빠르니까 상황에 맞게 선택하면 돼.