`forEach`가 `HTMLCollection`에서 직접 작동하지 않는 이유는 무엇입니까?

Array.forEach를 사용하여 HTMLCollection 반복

이 딜레마에서 개발자는 document.getElementsByClassName("myclass").forEach를 사용하여 DOM 요소를 반복하려고 시도합니다. ".forEach는 function."

HTMLCollection 이해

이 오류를 해결하는 열쇠는 getElementsByClassName에서 반환된 결과의 성격을 이해하는 데 있습니다. 이름과 달리 배열을 생성하지 않고 HTMLCollection을 생성합니다. NodeList와 마찬가지로 HTMLCollection은 DOM4 사양을 따르며 미묘하지만 중요한 방식에서 기존 배열과 다릅니다.

HTMLCollection을 배열로 변환

강력한 forEach 메서드를 활용하려면 먼저 HTMLCollection을 배열로 변환합니다. 여러 가지 방법으로 이 변환을 수행할 수 있습니다.

Array.prototype.forEach.call 사용:

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

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

[].forEach.call 사용:

[].forEach.call(els, function (el) {...});

사용 Array.from (ES6):

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

HTMLCollection을 배열로 변환하면 forEach를 포함한 다양한 배열 메서드를 활용하여 DOM 요소를 효율적으로 처리하고 조작할 수 있습니다.

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