querySelectorAll의 forEach가 Microsoft 브라우저에서 예상대로 작동하지 않는 이유는 무엇입니까?

querySelectorAll의 forEach가 Microsoft 브라우저에서 예상대로 작동하지 않음: 종합적인 검사 및 솔루션

Internet Explorer 및 Edge 브라우저는 forEach()를 활용하는 개발자에게 고유한 과제를 제시합니다. querySelectorAll 결과에 대한 메소드입니다. 이 메서드는 대부분의 다른 브라우저에서 잘 지원되지만 IE와 Edge는 사용된 DOM 메서드와 컬렉션 속성으로 인해 어려움을 겪습니다.

NodeList와 HTMLCollection의 차이점

배열과 유사한 NodeList 인스턴스와는 달리 일치하는 요소의 정적 스냅샷을 나타내는 HTMLCollection 인스턴스는 변경 사항이 실시간으로 반영되는 라이브 컬렉션입니다. forEach() 메서드는 최근 NodeList에서 구현되었지만 HTMLCollection에서는 이를 지원하지 않습니다. 그러나 두 컬렉션 모두 반복 가능하므로 배열로 확장하거나 for-of 루프 또는 Symbol.iterator 속성을 사용하여 반복할 수 있습니다.

forEach() 폴리필 및 반복 가능 동작

To NodeList에 forEach()가 없는 문제를 해결하려면 간단한 폴리필을 구현할 수 있습니다.

if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

마찬가지로 브라우저에 NodeList 또는 HTMLCollection에 Symbol.iterator 속성이 없으면 폴리필도 가능합니다.

if (typeof Symbol !== "undefined" && Symbol.iterator && typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype[Symbol.iterator]) {
    Object.defineProperty(NodeList.prototype, Symbol.iterator, {
        value: Array.prototype[Symbol.iterator],
        writable: true,
        configurable: true
    });
}

결론

NodeList와 HTMLCollection의 차이점을 이해하고 폴리필의 기능을 활용함으로써 개발자는 forEach() 메서드가 Internet Explorer 및 가장자리. 제공된 코드 샘플을 통해 개발자는 이러한 폴리필을 쉽게 구현하고 Microsoft 브라우저에서 forEach()의 예상 동작을 복원할 수 있습니다.

위 내용은 querySelectorAll의 forEach가 Microsoft 브라우저에서 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!