[JS] querySelector vs getElementById중 무엇을 사용해야 할까?

querySelector와 getElementById 중 무엇을 써야 될지 개념이 없어서 정리를 해봅니다. 

querySelector는 다양한 선택자를  입력할 수 있어서  선호했더니,

다른분들은 속도가 느리다고 잘 안쓰는 편이라고 합니다. 

 

---

querySelector

선택자(selector)와 일치하는 첫번째 엘리먼트 객체를 반환합니다. 

일치하는 엘리먼트가 없으면 null을 반환합니다. 

선택자는 ' '(외따옴표)나 " "(쌍따옴표)로  시작하며, 선택자의 종류에 따라 말머리가 달라집니다. (아래 예시를 참고) 

구문

querySelector(selectors);

 

예시 

document.querySelector('img'); //선택자가 html태그일때 아무것도 붙이지 않는다.
document.querySelector('.study');  //선택자가 class일때 "."을 붙인다. 
document.querySelectory('#travel'); //선택자가 id일때 "#"d을 붙인다.

---

 

querySelectorAll이라도 녀석이 있다. 

선택자와 일치하는 엘리먼트들의 NodeList를 반환합니다.

querySelector는 하나만 반환하지만, 이 녀석은 선택자가 매치된 모든 엘리먼트들을 반환합니다. 

여러 개를 선택하고 싶으면 이 녀석을 사용하면 될 것 같습니다. 
역시 일치하는 엘리먼트들이 없으면 빈 NodeList를 반환합니다. 

 

구문 

document. querySelectorAll(selectors);

 

예시

var matches = document.querySelectorAll("p");  //p엘리먼트의 nodeList를 한꺼번에 얻는다.

 

---

 

getElementById

 

id명과 일치하는 엘리먼트 객체를 반환합니다. 

역시 일치하는 엘리먼트가 없으면 null을 반환합니다. 

(getElementById는  선택자 기호를 안써도 됩니다. 즉 "#"을 안붙여도 됩니다)

 

구문

getElementById(id)

 

예시 

function changeColor(newColor) {
  var elem = document.getElementById('para');
  elem.style.color = newColor;
}

 

---

 

getElementByClassName 

class와 일치하는 엘리먼트들의 HTMLCollection을 반환합니다. 

(이 녀석도 선택자 기호를 안써도 됩니다. 즉 "."을 안붙여도 됩니다)

 

구문

document.getElementsByClassName(names)

 

예시

document.getElementsByClassName('test')

 

---

참고로 

실제 성능비교를 한 벤치마킹한 자료를 살펴보면 다음과 같습니다. 

Test name	Executions per second
querySelector	2436022.0 Ops/sec
getElementById	3311597.0 Ops/sec

https://www.measurethat.net/Benchmarks/ShowResult/149680

Run results for: querySelector vs getElementById - MeasureThat.net

 

 

 

아 이제 좀 이해가 갑니다. 

실제 자바스크립트에서 html에 접근하려고 이 녀석을 많이 사용하게 됩니다. 

저 같은 초보는 속도에 관심이 없으므로(ㅎㅎ)  querySelector가 편해서 자주 씁니다.