[자바스크립트] querySelector() 와 getElementById()의 차이점

getElementById()

• ID를 통해 element를 반환한다. 만약 document에 구체적인 ID의 element가 없다면 null을 반환한다.
•  getElementById()  는 하나의 element만 반환할 때 사용하기 좋다. 이유는 HTML ID는 고유한 하나의 태그만 사용 가능하기 때문이다. ID를 두 개의 element에 사용이 불가능하다.

 

querySelector()

• selector의 구체적인 그룹과 일치하는 document안 첫 번째 element를 반환한다. 일치하는 게 없다면 null을 반환한다.
•  querySelector() 은 CSS를 있는 element를 반환할 수 있다. 그 뜻은 ID, class, 또는 모든 타입의 element를 반환해준다.

 

querySelectorAll()

• DOM에서 선택한 element 중 매칭 하는 모든 element를 불러온다.

 

예제)

HTML

<p class="accessClass" id="accessId"> Hello </p>

 

getElementById() 사용

// 이 코드는 “accessId”를 가진 element를 반환한다.
const element = document.getElementById('accessId');

 

querySelector() 사용

// 이 코드는 “accessClass”를 가진 첫 class element를 반환한다. “.”는 우리가 class를 선택함을 나타낸다.
// 만약 “accessClass”가 두 개 이상이라면, querySelectorAll()을 사용하면 된다.
const element = document.querySelector('.accessClass');

 

공통점

• JavaScript Document Object Model (DOM)의 element를 반환한다.

 

차이점

•  querySelector() 에 비해  getElementById() 은 제한적이다. 왜냐하면  getElementById() 은 id를 가진 값만 반환해주기 때문이다.

 

언제 무엇을 사용해야 할까?

•   querySelector()  은   getElementById() 에 비해 속도가 느리다. 하지만 필요에 따라 사용할 필요가 있다.
• 자세한 내용은 여기에 참고하자.

 

결론

• ID 요소로 element 객체를 찾을 경우에는  getElementById() 를 사용하고, 그 외 경우에는  querySelector() 를 사용하자.

 

 

Reference

https://careerkarma.com/blog/javascript-queryselector-vs-getelementbyid/#:~:text=With