>  기사  >  웹 프론트엔드  >  최근 Microsoft 브라우저의 querySelectorAll에서 forEach()가 작동하지 않는 이유는 무엇입니까?

최근 Microsoft 브라우저의 querySelectorAll에서 forEach()가 작동하지 않는 이유는 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-10-20 06:44:02531검색

Why doesn't forEach() work on querySelectorAll in recent Microsoft browsers?

querySelectorAll의 forEach가 최근 Microsoft 브라우저에서 작동하지 않음

forEach() 메서드는 광범위한 지원에도 불구하고 최신 버전의 인터넷에서 querySelectorAll과 함께 사용할 때 몇 가지 문제가 발생합니다. Explorer(11) 및 Edge.

문제 이해

일치하는 DOM 요소를 나타내는 컬렉션인 NodeList 및 HTMLCollection에는 이전 Microsoft 브라우저에서 기본적으로 forEach() 메서드가 없습니다. 그러나 이러한 컬렉션은 반복 가능하므로 for-of와 같은 대체 방법을 사용하여 반복할 수 있습니다.

문제 해결

forEach() 폴리필

기본적으로 지원하지 않는 브라우저에서는 forEach() 메서드를 NodeList 및 HTMLCollection에 수동으로 추가할 수 있습니다. 이것은 간단하고 효과적인 솔루션입니다.

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

폴리필 반복성

브라우저에 ES2015 기능이 있지만 여전히 NodeList 반복성이 부족한 경우 이를 폴리필할 수도 있습니다.

<code class="javascript">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>

결론

forEach() 및 반복성을 폴리필하면 이전 Microsoft 브라우저의 한계를 극복하고 NodeList 및 HTMLCollection 컬렉션으로 작업할 때 코드의 일관된 동작을 보장할 수 있습니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.