querySelector vs getElementBy

• getElementById(id)
  • id를통해 일치하는 엘리먼트 객체 반환
  • 일치하는게 없으면 null 반환
•  querySelector(selectors)
  • selector와 일치하는 첫번째 엘리먼트 객체 반환
  • 일치하는게 없으면 null 반환
• getElementyByClassName
  • class명과 일치하는 엘리먼트들의 HTMLCollection을 반환
•  querySelectorAll
  • 선택자와 일치하는 엘리먼트들의 NodeList를 반환
• 종류 프로퍼티 메서드

  HTMLCollection	HTMLCollection.length	HTMLCollection.item()
  		HTMLCollection.namedItem()
  NodeList	NodeList.length	NodeList.item()
  		NodeList.entries()
  		NodeList.forEach()
  		NodeList.keys()
  		NodeList.values()

• HTMLCollection
  • 유사 배열
    • 인덱스나 반복문을 통해 요소에 접근가능
    • 배열 메서드 사용불가
  • live Collection
    • DOM 변경사항 실시간 반영
• NodeList
  • 유사배열
    • 인덱스나 반복문을 통해 요소에 접근가능
    • foreach, entires, keys, values는 사용가능
  • static Collection (non-live collection)
    • DOM의 변경사항 실시간 반영 X
    • 대부분의 Node List는 Live Collection이지만 querySelectorAll의 반환값은 Static 이라고 함
• querySelector가 getElementById보다 느림
  • but querySelector의 초당연산량이 초당 700만회로 충분하다.
• querySelector의 브라우저 지원범위가 getElementby에 비해 좁음
• querySelector의 장점은 생산성 과 편의성

참고문서

getElementById와 querySelector, 어느 것을 사용할까? | bobbohee

[JavaScript] getElementById와 querySelector 차이점