getElementsByClassName와 querySelectorAll의 차이점

날짜 : 2018. 02. 19(월)

getElementsByClassName와 querySelectorAll의 차이점

여기에서는 리턴값의 형태가 어떻게 다른지를 보겠습니다. 요즘에는 위의 2구문 모두 안 사용하기 때문에 그냥 참고만 하시면 되겠습니다.

한줄정리

Collection중 live한 값은 변경을 한경우 현재 사용하고 있는 값 일지라도 즉시 반영 된다.

내용

1. 생각을 하게 된 계기
   • querySelectorAll의 문서에서 non-live라는 말이 나오는데 무슨 의미 인지 알수가 없다.
2. 각 함수의 차이
   • getElementsByClassName는 HTMLCOllection를 리턴한다.
   • querySelectorAll은 NodeList를 리턴한다.
3. 각 리턴값의 차이
   • HTMLCOllection은 w3c에서 사용을 권장하지 않는다. (Elements을 권장한다.)
   • HTMLCOllection은 ElementNode만을 가지고, NodeList는 모든 Node를 가질수 있다.
   • HTMLCOllection은 live하여 변경한 값이 즉시 반영이 되며, NodeList는 일부 live한 경우도 있으며 static한 경우도 있다.
     1. NodeList live 경우 : Node.childNodes
     2. NodeList static 경우 : document.querySelectorAll()

참고자료

1. Difference between HTMLCollection, NodeLists, and arrays of objects
2. w3c concept-collection
3. MDN NodeList
4. MDN HTMLCollection