인프런 커뮤니티 질문&답변
작성한 질문수
dom 실습관련해서 질문드립니다!
해결된 질문
작성
·
322
0
dom 실습에서 google 로고 관련해서 실습을 진행했었는데, 구글로고를 가져와서 수정하거나 아니면 삭제하는등 실습을 보여줬는데, 저는 그게 안돼서 너무 답답합니다...
강사님이 이전에 질문에 대한 답변을 저에게 주셨는데, 그래도 안되서 어떡해 해야할지 모르겠습니다. 밑에 나와있는 것 처럼 InXdpd가 class에 해당하므로 getElementByClassName('InXdpd')로 했는데도 불구하고 'underfined'라고 나와서 어떡해 해야할지 모르겠습니다....
답변 4
0
안녕하세요, mn1121mn 님.
해당 문제는 getElementsByClassName 이 반환하는 값 때문에 발생하는 문제로 보입니다.
getElementsByClassName 는 하나의 값을 반환하지 않습니다.
(CSS에서 같은 이름의 class가 다수 있을 수 있기 때문입니다.)
getElementsByClassName는 HTMLcollection (array와 비슷한 형태)의 형태로 값을 반환합니다.
(참고링크 - 구글링 키워드 : 'getElementsByClassName return value')
그래서 해당 문제에서 이벤트 리스너를 등록하기 위해서는
logo[0].addEventListener('click' , function(){
alert('안녕')
});
와 같이 index값을 추가하셔서 접근하시면 될 것으로 보입니다.(logo -> logo[0])
[참고 - 예시] 혹여 inflearn라는 클래스를 가진 요소가 다수이고,
해당하는 모든 요소에 이벤트리스너를 등록하고 싶다면,
다음과 같은 방법을 활용하시면 됩니다.
var className = document.getElementsByClassName('inflearn');
for(let i = 0; i < className.length; i++) {
className[i].addEventListener("click", function() {
alert('안녕');
})
}(참고링크 - 구글링 키워드: 'getElementsByClassName addEventListener' )
혹시 더 궁금한 사항이 있다면, 문의 남겨주세요!
감사합니다 :)
0
0
0
안녕하세요, mn1121mn 님.
document.getElementsByClassName('lnXdpd') 와 같은 방법으로 해당 로고를 가져올 수 있을 것으로 보입니다.
mn1121mn님께서 입력하신 document.getElementsByClassName('InXdpd') 으로 보입니다. (소문자 l 과 대문자 I 의 차이)
소문자 l과 대문자 I를 구분하기가 힘듭니다.
그래서 직접 인스펙터로 직접 구글로고를 선택하시고, Elements 요소에서 직접 class나 id값을 복사 붙여넣기 하셔서 확인해보시는 것도 좋은 방법이라고 생각합니다 :)
혹시나 위와 같은 방법으로 문제가 해결되지 않는다면, 다시한번 문의 남겨주세요!