Microsoft 브라우저의 DOM 컬렉션에 대해 \"개체는 \'forEach\'\ 속성 또는 메서드를 지원하지 않습니다."라는 메시지가 표시되는 이유는 무엇입니까?

DOM 컬렉션용 Microsoft 브라우저의 forEach() 관련 문제

개발자로서 우리는 종종 forEach() 메서드를 사용하여 탐색하고 DOM 컬렉션을 조작합니다. 그러나 Internet Explorer 11 및 Edge에서는 "개체가 'forEach' 속성이나 메서드를 지원하지 않습니다."라는 실망스러운 오류가 발생할 수 있습니다.

DOM 컬렉션 이해

이 문제를 해결하려면 querySelectorAll과 같은 DOM 메서드가 본질적으로 forEach()를 지원하지 않는 NodeList 또는 HTMLCollection 반환 컬렉션을 이해해야 합니다.

• NodeList: 일치하는 요소는 DOM 변경 사항을 자동으로 반영하지 않습니다.
• HTMLCollection: NodeList와 유사하지만 DOM의 변경 사항을 실시간으로 반영합니다.

Each에 대한 폴리필링 ()

NodeList는 forEach()를 갖도록 지정되었으므로 안전하게 폴리필할 수 있습니다.

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

반복성 보장

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>

이러한 폴리필을 사용하면 IE11 및 Edge에서도 NodeList 및 HTMLCollection에 forEach()를 성공적으로 사용할 수 있습니다.

사용 예

<code class="js">var color_btns = document.querySelectorAll('#color > p');
color_btns.forEach(function(color) {
    // Our custom logic here...
});</code>

추가 고려 사항

HTMLCollection에 forEach()를 추가하면 일부 레거시 DOM 라이브러리가 혼동될 수 있습니다. 이러한 경우에는 NodeList의 forEach()만 폴리필하세요.

위 내용은 Microsoft 브라우저의 DOM 컬렉션에 대해 \"개체는 \'forEach\'\ 속성 또는 메서드를 지원하지 않습니다."라는 메시지가 표시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!