JS에서 Nodelist Dom 목록을 반복하는 4가지 방법

이번에는 JS에서 Nodelist Dom 목록을 반복하는 4가지 방법을 알려드리겠습니다. JS에서 Nodelist Dom 목록을 반복하는 주의 사항은 무엇인가요?

이 문서의 예에서는 기본 JS에서 반복 Nodelist Dom 목록을 구현하는 4가지 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

function $(id) {
 return document.getElementById(id);
}
var _PAGE = {
 timeListDom: $('timeList')
};
var spanDoms = _PAGE.timeListDom.querySelectorAll('span'), domLen = spanDoms.length;
// 第一种方式：原生for循环
for (var i = 0; i < domLen; i++) {
 var v = spanDoms[i];
 // do something you want deal with DOM
}
// 第二种方式：Array 的 forEach函数
Array.prototype.forEach.call(spanDoms, function(v) {
 // do something you want deal with DOM
});
// 第三种方式：Array 的 forEach函数
[].forEach.call(spanDoms, function(el) {
 // do something you want deal with DOM
 el.classList.remove('active');
});
// 第四种方式：继承Array 的 forEach函数
NodeList.prototype.forEach = Array.prototype.forEach;
spanDoms.forEach(function(v) {
 // do something you want deal with DOM
});

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JavaScript 비동기 로딩에 대한 자세한 설명

이미지 경로로 인한 웹팩 패키징 오류 처리 방법

위 내용은 JS에서 Nodelist Dom 목록을 반복하는 4가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!