getElementsByClassName을 통해 올바르게 반복

웹 페이지 작업을 할 때 클래스 이름으로 요소에 액세스하는 것은 일반적인 작업입니다. getElementsByClassName 메소드는 일치하는 요소의 컬렉션을 나타내는 NodeList를 제공합니다. 그러나 NodeList를 반복하는 것은 특히 DOM을 수정할 때 까다로울 수 있습니다.

귀하의 경우 getElementsByClassName("slide")에서 반환된 요소를 반복하고 각 요소에 대해 작업을 수행하려고 합니다. 배포 기능을 사용합니다. 그러나 NodeList의 특성 변경으로 인해 예측할 수 없는 동작이 발생하고 있습니다.

해결책은 item(index) 메서드를 사용하여 NodeList에서 개별 요소를 검색하는 것입니다. 올바르게 반복하는 방법은 다음과 같습니다.

const slides = document.getElementsByClassName("slide");

for (let i = 0; i 
item() 메서드를 사용하면 해당 인덱스를 통해 NodeList의 각 요소에 액세스할 수 있습니다. 이렇게 하면 DOM이 변경되더라도 반복이 결정적으로 유지됩니다.
추가 고려 사항
슬라이드 요소가 서로 중첩될 수 있는 경우 다음 사항에 유의하는 것이 중요합니다. item() 메서드는 지정된 클래스 이름이 없는 모든 중첩 요소에 대해 null을 반환합니다. 중첩된 슬라이드를 처리하려면 컨테이너 내의 모든 요소를 ​​쿼리하고 클래스 이름으로 필터링하는 등의 고급 기술을 사용할 수 있습니다.