getElementsByClassName 과 querySelector

textarea 의 value 에 값을 넣을 때 대상이 되는 요소를 가져오는데 getElementsByClassName 로는 안되고, 

querySelector 로 가져올 때 정상작동이 되어 차이점을 알아보려고 한다.

getElementsByClassName

동일한 class를 갖고 있는 모든 요소 목록의 HTMLCollection 을 반환

console.log(parent.getElementsByClassName('comments-area'));

 

결과

HTMLCollection 이란?

요소의 문서 내 순서대로 정렬된 일반 컬렉션을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합니다(배열과 유사한 모습)

문서가 바뀔 때 실시간으로 업데이트 된다.

 

querySelector

단 하나의 요소만 반환.

첫 번째 노드의 값을 반환하며 없으면 null 반환.

console.log(parent.querySelector('.comments-area'));

console.log(parent.querySelector('.img-box img'));

 

두 번째 코드처럼 선택자를 추가하여 하위 요소를 가져오는 것도 가능.

 

 

첫 번째 코드 결과