getElementsByClassName VS querySelectorAll

querySelectorAll 은 NodeList 객체반환

getElementsByClassName 은 HTMLCollection 객체반환

둘다, 유사배열이다.

querySelectorAll 경우

<ul>
  <li>가</li>
  <li>나</li>
  <li>다</li>
  <li>라</li>
  <li>마</li>
</ul>

const ul = document.querySelector('ul');
const li = document.querySelectorAll('li');
let new_item = document.createElement('li');
new_item.textContent = '바';
ul.appendChild(new_item);
console.log(li) 
//[li, li, li, li, li]new_item이 NodeList에 포함되지 않음!

querySelectorAll 은 new_item이 NodeList에 포함되지 않기 때문에 li를 넣어주지 않는다. 따라서

결과값은 기존의 "가,나,다,라,마" 만 보여준다.

getElementsByClassName 경우

const li = document.getElementsByClassName('li');

이부분만 바꿔주면
new_item이 HTMLCollection에 포함되기 때문에 [li, li, li, li, li, li] // 6개 가 되고
결과값은 "가,나,다,라,마,바" 가 된다.

참고자료 : http://ezcode.kr/study/view/217