`getElementsByClassName`이 `forEach`와 직접 작동하지 않는 이유는 무엇입니까?

Array.forEach 메서드: getElementsByClassName

getElementsByClassName 메서드를 사용하여 DOM 요소에 대해 반복을 시도하는 동안 개발자는 다음과 같은 문제가 발생할 수 있습니다. 특이한 오류: "document.getElementsByClassName('myclass').forEach는 함수가 아닙니다." Firefox 3에 getElementsByClassName과 Array.forEach가 모두 있음에도 불구하고 오류가 지속됩니다.

getElementsByClassName의 결과가 배열이 아니기 때문에 혼란이 발생합니다. 최신 브라우저에서는 HTML 요소에 맞게 맞춤화된 특수 컬렉션인 HTMLCollection입니다. 배열과 유사한 속성을 갖고 있지만 실제 배열은 아닙니다.

문제를 해결하고 요소에 대해 성공적으로 반복하기 위해 개발자는 트릭을 사용할 수 있습니다. 즉, Array의 forEach 메서드를 호출하여 HTMLCollection을 이 값은 다음과 같습니다.

var els = document.getElementsByClassName("myclass");

Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
});

이 기술을 사용하면 반복이 예상대로 진행될 수 있습니다. 또는 개발자는 ES6 환경에서 사용할 수 있는 Array.from을 사용하여 반복하기 전에 HTMLCollection을 배열로 변환할 수 있습니다.

Array.from(els).forEach((el) => {
    // Do stuff here
});

이러한 기술을 활용하면 개발자는 getElementsByClassName을 통해 얻은 DOM 요소를 효과적으로 반복할 수 있습니다. Array.forEach 메소드와 호환됩니다.

위 내용은 `getElementsByClassName`이 `forEach`와 직접 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!