자바스크립트 ID로 값 찾기 vs class 로 찾기

 

 

안녕하세요 36기 웹 YB 김시연입니다!

자바스크립트 공부하다가 궁금했던 부분을 열심히 찾아보았는데요, 기억하면 좋을 것 같은 내용 하나를 이번 아티클 주제로 가져왔습니다!

ㅕ

자바스크립트에서 html에 있는 요소를 찾을 때 getElementById(), getElementsByClassName() 같은 메소드를 사용한다고 배우면서

뭘 사용하는 게 제일 빠를까? 언제 뭘 사용해야 하는 거지..? 와 같은 의문이 들어서 이에 관련해서 찾아보게 됐습니다.

 

먼저 각각 어떻게 사용하는지 알아보고, 비교되어 있는 표로 정리해보겠습니다~

 

 

document.querySelector(선택자)

메소드는 이런 식으로 사용합니다. document라는 객체 안에 여러 가지 메서드가 미리 만들어져 있기 때문에 이런 식으로 사용할 수 있다고 해요~

document는 웹 페이지 전체를 대표하는 객체로, 브라우저가 현재 보고 있는 HTML 문서 전체를 가리킨다.
선택자(selector)는 HTML 요소를 선택하는 규칙이다. (CSS 문법에서 쓰는 그 선택자!)

 

 

✅ getElementById()

사용방법🚀

const yeon = document.getElementById('siyeon');

 

특징✏️

• 파라미터로 찾으려는 id를 전달하고 해당하는 element를 찾을 수 있다. 
• id는 유일한 값이기 때문에 하나의 element만 리턴함  *만약 중복 선언되어 있다면 해당 ID를 가진 첫 번째 요소를 반환함
• 없으면 null 반환
• 속도 가장 빠름! 브라우저가 ID 인덱스를 통해 직접 접근하기 때문
• ID가 유일하게 지정된 요소를 선택할 때, 빠르게 특정 요소를 가져오고 싶을 때 사용한다.

---

 

✅ getElementsByClassName()

사용방법🚀

const jellys = document.getElementsByClassName("jelly");

 

특징✏️

• 여러 개의 요소를 한꺼번에 선택할 수 있음
• 클래스 이름으로 element를 찾아서 이 클래스 이름을 가지는 모든 element 목록을 리턴함! (그래서 Element's' 인 것)
• 반환값은 HTMLCollection이라서 배열처럼 보이지만 진짜 배열은 아님! 유사 배열
• id보다는 속도가 느리지만 여전히 빠른 편
• 특정 클래스를 가진 여러 요소를 다뤄야 할 때, 실시간(live) DOM 변경을 반영해야 할 때 사용 (ex. 요소가 동적으로 추가되거나 삭제되는 경우)

---

✅ getElementsByTagName()

사용방법🚀

const p_list = document.getElementsByTagName('p');

 

특징✏️

• 괄호 안에 들어간 태그를 가지는 모든 element 목록을 찾아줌
• 다수의 element 리턴하기 때문에 위에 class로 찾는 것과 마찬가지로 element's'
• HTMLCollection(유사배열)을 반환함, 지정된 태그 이름을 가진 모든 요소 반환, 실시간 컬렉션이라 DOM이 변경되면 자동 반영된다.
• getElementById보다는 느리지만 여전히 빠름 (태그 이름만 비교하므로 단순하다)
• 특정 태그(div, li, p 등)로 그룹을 선택하고 싶을 때, 빠르게 여러 같은 종류의 요소를 다루고 싶을 때, DOM 변경사항을 실시간 반영해야 할 때 사용

---

✅ querySelector()

사용방법🚀

const element = document.querySelector('.myClass');         // 클래스
const element2 = document.querySelector('#myId');           // 아이디
const element3 = document.querySelector('div > span');      // CSS 선택자

 

특징✏️

• DOM에서 원하는 element를 찾기 위해 사용! 
• 파라미터로 입력받은 CSS 선택자를 사용해서 element를 찾아준다.
• CSS 선택자로 찾은 여러 개의 element 중 첫 번째 element를 리턴한다.
• getElementById 보다는 느리다. 복잡한 CSS 선택자를 사용할 수 있어서 유연성이 높다.
• CSS 선택자 문법을 이용해서 유연하게 요소를 선택하고 싶을 때, ID/클래스/태그 등 다양한 조건을 조합해서 선택하고 싶을 때 사용

---

 

✅ querySelectorAll()

사용방법🚀

const elements = document.querySelectorAll('.myClass');       // 클래스
const elements2 = document.querySelectorAll('ul > li');       // 복잡한 선택자

 

특징✏️

• 선택자에 해당하는 모든 요소를 반환한다. 정적이므로 DOM이 변경되어도 자동 반영되지 않는다.
• 속도는 querySelector와 비슷하거나 약간 느릴 수 있고, 유연성과 편리함을 제공하지만 성능이 중요할 땐 주의할 것
• CSS 선택자를 사용해서 여러 요소를 선택하거나 DOM 변경 사항을 자동으로 반영할 필요가 없을 때 사용

 

 

 

 

😎 마무리 정리!

메서드	반환값	속도	언제 쓰는 게 좋은가
getElementById()	단일 요소	⭐ 가장 빠름	고유한 하나 선택할 때
getElementsByClassName()	HTMLCollection	빠름	같은 class 여러 개 있을 때
getElementsByTagName()	HTMLCollection	빠름	같은 종류의 요소를 빠르게 다룰 때
querySelector()	단일 요소	약간 느림	CSS 선택자처럼 다루고 싶을 때
querySelectorAll()	NodeList	약간 느림	class 여러 개, 조건 복잡할 때

 

 

 

 

 

<참고자료>

https://hianna.tistory.com/485

https://velog.io/@lkm021/javascript025