강의 영상 중 질문입니다.

Question

<html css js를 활용한 반응형 모던 웹페이지 만들기 3> 강의 영상 중 질문입니다.

const slidePreviewList = document.getElementsByClassName("slide-prev"); 로 상수를 선언하시고

그후 for문에서

for (let i = 0; i < slidePreviewList.length; i++) {

let classList =

slidePreviewList[i].parentElement.parentElement.nextElementSibling;

let liList = classList.getElementsByTagName("li"); ...~}

여기서 slidePreviewList[i]는 어떤걸 지칭하는건가요?

slidePreviewList[1]은 slide-prev라는 클래스 이름을 가지는 첫번재 요소를 가리키고

slidePreviewList[2]는 slide-prev라는 클레스 이름을 가지는 그다음 요소를 가리키는 방식인가요?

좋은강의 항상 감사합니다.

잔재미코딩 DaveLee · Answer

안녕하세요. 답변도우미입니다. 말씀하신 코드가 다음 코드를 이야기하시는 것 맞죠? 해당 코드에서 첫 줄에 slidePrevList 는 전체 HTML 코드에서 slide-prev 클래스를 모두 배열로 가져옵니다. 즉, 여러 강의 리스트가 여러 행에 있을 때, 각 행에 있는 < 화살표 표시를 가져와서요. 말씀하신대로, 첫번째 행의 요소는 slidePrevList[0] 이 되고, slidePrevList[1] 은 두번째 행의 요소를 가리키게 됩니다. const slidePrevList = document.getElementsByClassName('slide-prev'); for (let i = 0; i < slidePrevList.length; i++) { // ul 태그 선택 let classList = slidePrevList[i].parentElement.parentElement.nextElementSibling; let liList = classList.getElementsByTagName('li'); 조금 복잡하실 수 있어요. 반복해서 해당 부분을 설명한 영상을 들으시면서, console.log 로 출력해보시거나, 디버그 포인트를 잡으셔서, 해당 객체의 세부 데이터를 확인해보시면 조금씩 더 익숙해지실꺼예요. 감사합니다.