-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
질문 이요~~
19.08.15 12:46 작성 조회수 144
0
프로토타입 안에서 기존body에 appendChild해서 붙여주는걸 body 말고 contains이라는 클래스에 붙이고 싶은데
아래처럼 getElementsByClassName으로 불러오면 에러가 나옵니다. queryselctor로 가능하다는건 아는데 겟 엘리멘츠로도 해보고 싶어서요
도와주세요 선생님~
Card.prototype = {
constructor:Card,
init:function () {
const mainElem=document.createElement('div');
mainElem.style.color= 'red';
mainElem.innerHTML= "bye";
mainElem.classList.add('card');
document.getElementsByClassName('contains').appendChild(mainElem);
}
답변을 작성해보세요.
3
1분코딩
지식공유자2019.08.15
getElementsByClassName 메서드는
배열과 비슷한 형태로 생긴 HTMLCollection이라는 객체를 리턴하는데요,
배열처럼 index를 가지고 있기 때문에 해당 원소에 직접 접근 하려면 index 번호를 사용해서 접근해야 합니다.
예를들어,
<div class="contains"></div>
<div class="contains"></div>
<div class="contains"></div>
이런 div가 3개가 있다고 하면,
document.getElementsByClassName('contains')가 리턴하는 객체에는
[ 첫번째div, 두번째div, 세번째div ]
이런 식으로 3개의 원소가 들어가기 때문에,
각 원소를 사용하려면 [0], [1], [2]와 같은 index를 사용해 주셔야해요.
즉
document.getElementsByClassName('contains').appendChild(mainElem);
이 부분을
document.getElementsByClassName('contains')[0].appendChild(mainElem);
이렇게 수정하시면 정상 작동 할거에요~
답변 1