[JS] DOM 요소 선택자

document.getElementById (= 아이디 속성값)
document.getElementByClassName (= 클래스 속성값)
document.getElementByTagName (= 태그명)
document.getElementsByName (= name 속성값)

...는 동적이고, 반면

document.querySelector (= CSS 선택자)
또는
document.querySelectorAll (= CSS 선택자)

는 정적입니다.

예를 들면, 동일한 이름의 클라스 배열을 document.getElementByClassName으로 불러온 후 for 반복문을 통해부모의 특정 자식 요소를 제거하면 원래 배열의 길이가 5에서 3으로 줄어드는 것을 볼 수 있습니다.

반면, querySelctorAll은 html상에선 변화된 것처럼 보이지만, 콘솔창에 출력해보면 배열의 길이는 그대로임을 알 수 있습니다.

둘 다 필요에 따라서 사용되는 것이지 어느쪽이 더 좋다고 말할 순 없습니다.