getElementById, querySeletor의 차이

참고블로그 : https://velog.io/@chloeee/getElementById-그리고-querySelector-차이점

• 사용방법
  let element1 = document.getElementByID("id")
  let element2 = document.querySelector("#id2")

• 차이점

  1) getElementByID, getElementByClass - id명이나 class명을 String타입으로 입력
  querySelector - #id, .class와 같이 선택자를 넣어서 String 타입으로 입력, HTML요소(div)도 선택 가능

  e.g. const 요소 = document.querySeletor(".id #class")

  2) 동일한 클래스명을 가진 여러 요소를 모두 선택하고 싶을 때
  getElementByClass("black") - 해당 클래스명만 String으로 입력
  querySelectorAll("#btn .black") - 상위 요소부터 String으로 입력 All을 사용하지 않으면 해당 클래스의 첫번쨰 요소가 선택된다.

  여기까지(1,2)의 결과 값은 같다.

  3) getElementsByClassName은 HTMLCollection에 리턴이 되고 querySelectorAll은 NodeList에 리턴된다.
  HTMLCollection과 NodeList는 둘 다 배열과 같이 각 항목을 접근하기 위한 인덱스를 제공한다. 그러나 HTMLCollection의 항목은 name, id 속성으로도 접근이 가능하지만, NodeList의 항목은 인덱스 번호로만 접근이 가능하다. 배열처럼 for문을 돌릴 수도 있다.
  

cf) getElementById는 예전에 많이 쓰던 방식. 요즘은 querySelector를 더 많이 사용