인프런 커뮤니티 질문&답변
작성한 질문수
getElementBYId/ClassName과 querySelector의 차이점
해결된 질문
작성
·
445
1
요소를 생성하고 추가할때
const parent = document.querySelector("div.today-info");
parent.appendChild(seasonElement);
querySelector로하면 잘돌아가는데
const parent = document.getElementByClassName("today-info");
parent.appendChild(seasonElement);
className 으로하면 appendChild에서 에러가 생기는 이유가 궁금합니다. 둘다 className을 반환하는것 아닌가요?
답변 1
1
안녕하세요 SU_VIN님 :)
querySelector와 getElementsByClassName의 차이점은 다음과 같습니다.
- querySelector : css선택자로 단 하나의 요소 노드를 반환
- getElementsByClassName : 동일한 class이름을 갖고 있는 모든 요소들을 반환
그렇기 때문에 getElementsByClassName을 사용해 요소 노드들을 가져온 다음 appendChild를 하기 위해서는 const parent = document.getElementsByClassName("today-info");
parent[0].appendChild(seasonElement); // []에 알맞은 인덱스 번호 입력
위의 코드와 같이 작성해주어야합니다.
추가로 동일한 class이름을 갖고 있는 여러 요소들을 반환할 때에는
getElement"s"ClassName 이렇게 s를 붙여서 사용해야합니다!!