Edge 및 Internet Explorer에서 HTMLCollections의 Array.forEach 문제를 해결하는 방법은 무엇입니까?

Edge 및 Internet Explorer의 HTMLCollections에 대한 Array.forEach 문제

소개:

DOM querySelectorAll과 같은 컬렉션 속성 및 메서드는 컬렉션, 특히 NodeList(querySelectorAll의 경우) 또는 HTMLCollections(getElementsByTagName과 같은 메서드의 경우)를 반환합니다. 이러한 컬렉션은 기능 면에서 일반 배열과 다릅니다.

forEach 문제:

NodeList 및 HTMLCollection은 기본적으로 forEach 메서드를 지원하지 않습니다. 이것이 Microsoft Edge 및 Internet Explorer 브라우저에서 "개체가 'forEach' 속성 또는 메서드를 지원하지 않습니다."라는 오류가 발생하는 이유입니다.

해결책:

1. NodeList에 대한 forEach 폴리필:

forEach가 NodeList와 작동하도록 하려면 다음과 같이 정의할 수 있습니다.

<code class="js">if (typeof NodeList !== "undefined" &amp;&amp; NodeList.prototype &amp;&amp; !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}</code>

2. NodeList 및 HTMLCollection에 대한 폴리필 반복성:

NodeList 및 HTMLCollection이 반복 가능하도록 지정되었으므로 다음을 사용하여 폴리필할 수 있습니다.

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

추가 참고 사항:

• for-of: 폴리필링 반복성을 통해 컬렉션에서 직접 for-of 루프 구문을 사용할 수 있습니다.
• 라이브 컬렉션: HTMLCollection은 라이브 컬렉션입니다. 즉, DOM에 대한 변경 사항이 컬렉션에 반영됩니다. NodeList가 라이브가 아닙니다.
• 호환성: 제공된 폴리필은 IE11과 같은 기본 forEach 지원이 없는 대상 브라우저를 대상으로 합니다.

위 내용은 Edge 및 Internet Explorer에서 HTMLCollections의 Array.forEach 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!