querySelector vs querySelectorAll vs getElementsByClassName

• document.querySelector

  • 노드의 서브트리에서 매칭되는 첫번째 노드의 값을 반환한다. 만약 매칭되는 노드가 없으면 null을 반환한다.

• document.querySelectorAll

  • 노드의 서브트리 내에서 매칭되는 모든 요소를 포함한 노드리스트를 반환하고, 매칭되는 것이 없다면 빈 노드리스트를 반환한다.

• querySelector && querySelectorAll

  • querySelector(), querySelectorAll()로 생성된 순간의 셀렉터들로 채워진 요소들을 포함한다. (이 값은 변하지 않는다.)
  • They can be a complete CSS(3)-Selector with IDs and Classes and Pseudo-Classes
    • #id.class:pseudo
    • tag #id .class .class.class

• document.getElementsByClassName

  • getElementsByClassName()로 생성된 변수는 사용되었을 때의 셀렉터들로 채워진 요소들을 포함한다. (함수가 처음 불렸을 때의 값과 다를 수 있다.)

var aux1 = document.querySelectorAll(".blue"); // .blue is HTML DOM
var aux2 = document.getElementsByClassName("blue"); // blue is just class name

querySelectorAll(STATIC)과 getElementsByClassName(LIVE) 차이를 보여주는 코드

[참고]

• medium 포스팅
• 스택오버플로우