getElementBYId/ClassName과 querySelector의 차이점
요소를 생성하고 추가할때
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를 붙여서 사용해야합니다!!
브라우져 호환성 문의
0
67
2
4-23 Promise객체 12:05 코드 질문
0
60
2
<div class="bookmark-item-add-btn"> 질문
0
58
2
랜덤이미지
0
58
2
"6. 1. (최신 버전) 자바스크립트 코딩 환경 설정"의 화면이 정상적으로 출력되지 않습니다
1
72
2
북마크바 디폴트가 "북마크 열기"로 뜹니다.
1
130
1
홈페이지 이미지 추가 방법 문의드립니다!
0
115
2
북마크 추가 버튼 활성화 오류 문의드립니다!
0
113
1
북마크바 배치 문의드립니다!
0
113
2
명언 설정하는데 위치설정 오류가 있어요!
0
143
2
4:45 부터 무한로딩되어 재생이 안됩니다ㅠ
1
105
1
BigInt Type 에 대하여
0
86
1
계속 헷갈리네요. 이게 맞나요?
1
149
2
섹션 7 - 7 프로젝트 적용하기
1
120
2
섹션7 - 7 프로젝트 적용하기
0
88
1
섹션7-4 api사용해서 명언 설정하기
0
135
2
6분 53초 질문입니당
1
119
2
왜 전부다 div태그로 만드는지 궁금합니다.
1
231
2
[수업질문] bookmark.js에서
0
130
2
최종 프로젝트 적용
0
181
2
append&appendChild+메소드 호출
1
137
1
코드샌드박스 업데이트
0
167
2
async pending상태의 promise객체
1
151
2
화면이 다릅니다.
1
177
1