querySelector vs getElement..

dom에 접근하는 방법에 대해 처음 접한게 querySelector라 그런지 자연스레 querySelector를 항상 사용해왔는데, getElementById의 속도가 더 빠르다는 글을보고 궁굼해져 찾아보았다.

사용방법

querySelector

// querySelector -> 일치하는 요소 하나를 반환한다.
const findClass = document.querySelector(".class"); // 클래스로 찿을때
const findId = document.querySelector("#class"); // 아이디로 찾을때

// querySelectorAll -> 일치하는 요소를 모두 반환한다.
const findAllClass = document.querySelectorAll(".class"); // 클래스로 찿을때
const findAllId = document.querySelectorAll("#id"); // 아이디로 찿을때

getElementById

const findId = document.getElementById("#id");

getElementByClass

const findClass = document.getElementByClassName(".class");

정리

• querySelector가 getElementById보다 느린건 사실이다.
  • querySelector는 초당 700만건의 작업을 처리할 수 있어 그렇게 느리진 않다.
• getElementById는 id속성만 선택자로 사용할 수 있지만, querySelector는 id, class등 다양한 선택자를 사용할 수 있다.
• 해당 클레스를 가지고 있는 요소를 하나만 찾고싶을때, getElementByClassName의 경우 배열로 모든 요소를 가져오지만 querySelector를 사용하면 가장 첫번째 요소 하나만 찾을 수 있다.
• id로 요소를 가져오고 싶을땐 더 빠른 getElementById를 다양한 선택자를 사용할때는 querySelector를 상황에 맞게 사용한다!

번외

getElementsByClassName을 사용하면 요소가 HTMLCollection에 담겨 리턴이 되고, querySelectorAll을 사용하면 요소가 NodeList에 담겨 리턴이 된다.

HTMLCollection: name, id 속성으로 항목에 접근이 가능하다.

NodeList: 인덱스 번호로만 접근이 가능하다.