get 메서드 vs. query 메서드

get 메서드

• 오래전부터 쓰여온 방법으로, 주로 id, class, 태그 이름 등 특정 기준으로 요소를 찾을 때 사용해요.
  예시:
• document.getElementById("myId"): id가 "myId"인 요소 하나를 찾아요.
• document.getElementsByClassName("myClass"): class가 "myClass"인 모든 요소들을 찾아요.

// id로 요소 찾기
const elementById = document.getElementById("myId");
console.log(elementById);

// class로 여러 요소 찾기
const elementsByClass = document.getElementsByClassName("myClass");
console.log(elementsByClass);

---

query 메서드

• CSS 선택자 문법을 사용하여 요소를 찾는 방법이에요.
  원하는 조건을 아주 유연하게 조합할 수 있어서, 요즘 많이 쓰여요.
• 예시:
  • document.querySelector("#myId"): id가 "myId"인 첫 번째 요소를 찾아요.
  • document.querySelectorAll(".myClass"): class가 "myClass"인 모든 요소들을 찾아요.

// CSS 선택자로 id로 요소 찾기
const elementByQuery = document.querySelector("#myId");
console.log(elementByQuery);

// CSS 선택자로 class로 여러 요소 찾기
const elementsByQuery = document.querySelectorAll(".myClass");
console.log(elementsByQuery);

---

뭐가 더 자주 쓰이나요?

query 메서드

• 요즘에는 querySelector와 querySelectorAll이 많이 쓰여요.
• 이유는 CSS 선택자 문법을 사용하기 때문에, 복잡한 조건도 쉽게 적용할 수 있어서 편리해요.

get 메서드

• 단순하게 id나 class, 태그만 정확하게 찾을 때는 여전히 많이 사용돼요.
• 특히, getElementById는 매우 빠르고 자주 사용됩니다.

query 메서드가 더 유연해서 최근에는 많이 쓰이지만, 상황에 따라 get 메서드도 유용하게 사용.

여기서 유연이란?

"유연하다"는 말은 querySelector와 querySelectorAll을 사용할 때, CSS 선택자 문법을 그대로 활용할 수 있다는 의미.
이를 통해 여러 조건을 한 번에 결합하여 복잡한 요소 선택 가능.

예,

• id와 class를 동시에 선택:

  document.querySelector("#myId.myClass");

  위 코드는 id가 "myId"이고, 동시에 class가 "myClass"인 요소를 찾습니다.

• 특정 속성을 가진 요소 선택:

  document.querySelector("[data-role='admin']");

  위 코드는 data-role 속성이 "admin"인 요소를 찾습니다.

즉, 단순히 id나 class만 찾는 get 메서드보다,
CSS 선택자처럼 다양한 조건을 조합해서 원하는 요소를 더 세밀하게 선택할 수 있는
장점이 있어서 "유연하다"고 표현합니다.