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()가 없는 문제를 해결하려면 간단한 폴리필을 구현할 수 있습니다. ) { NodeList.prototype.forEach = Array.prototype.forEach; }

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

결론

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
    });
}