> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 `getElementsByClassName()` 결과를 올바르게 반복하는 방법은 무엇입니까?

JavaScript에서 `getElementsByClassName()` 결과를 올바르게 반복하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-12-01 06:07:13
원래의
431명이 탐색했습니다.

How to Correctly Iterate Over `getElementsByClassName()` Results in JavaScript?

오류: getElementsByClassName() Array.forEach를 사용한 결과 반복

getElementsByClassName() 및 배열을 사용하여 DOM 요소를 반복하려고 할 때. forEach 메소드를 사용하면 다음과 같은 이유로 사용자에게 오류가 발생할 수 있습니다. getElementsByClassName()은 배열을 반환하지 않습니다.

getElementsByClassName()의 결과는 HTMLCollection이며, 최신 브라우저에서는 배열과 다릅니다. 이 문제를 해결하려면 forEach를 사용하기 전에 HTMLCollection을 배열로 변환하세요. 이는 다음 방법을 통해 달성할 수 있습니다.

  • Array.prototype.forEach와 함께 call() 사용:
var els = document.getElementsByClassName("myclass");
Array.prototype.forEach.call(els, function(el) {
  // Do stuff here
  console.log(el.tagName);
});
로그인 후 복사
  • 사용 `[].forEach.call():
[].forEach.call(els, function (el) {
  // Do stuff here
  console.log(el.tagName);
});
로그인 후 복사
  • `Array.from() 사용(ES6)**:
Array.from(els).forEach((el) => {
  // Do stuff here
  console.log(el.tagName);
});
로그인 후 복사

위 내용은 JavaScript에서 `getElementsByClassName()` 결과를 올바르게 반복하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿