NodeList를 반복하는 11가지 방법

NodeList를 반복할 수 있는 방법에 대해 감사한 적이 있습니까? 나 자신은 작업에 대해 하나의 해결 방법을 사용하지만 생각하고 있었고 훨씬 더 많은 것이 있다는 것을 깨달았습니다. 몇 가지 옵션을 살펴보겠습니다

NodeList 가져오기:

  const elements = document.querySelectorAll('.selector');

클래식 forEach부터 시작해 보겠습니다.

모든 브라우저가 NodeLists에서 forEach를 지원하는 것은 아니지만 작동하는 브라우저에 대해서는 다음과 같이 지원합니다.

elements.forEach((element) => {
  element.addEventListener('click', () => {
    console.log("iteration worked", element);
  });
});

forEach를 call 메소드와 함께 사용하는 또 다른 방법은 약간 까다로워 보일 수 있지만 작동하고 더 광범위한 브라우저 지원을 제공합니다.

[].forEach.call(elements, function(element) {
  console.log("iteration worked", element);
});

생성된 빈 배열의 프로토타입 메서드에 액세스하고 호출을 사용하면 NodeList가 이점을 취할 수 있지만 이것이 작동할 수 있는 것도 나쁜 습관입니다. 다음 예제와 그것이 나쁜 이유를 살펴보겠습니다.

NodeList.prototype.forEach = Array.prototype.forEach;

이것은 프로토타입을 통해 기존 DOM 기능을 확장합니다. 이것은 문제의 톤으로 이어질 수 있으므로 나쁜 습관으로 간주됩니다.

문제 중 일부는 선택기를 캐싱하지만 배열이나 루프가 수행하는 작업을 캐싱하지 않는다는 것입니다. 즉, 메서드를 재사용할 수 없습니다.
또한 Array 메서드가 부족합니다(forEach만 확장했으며 물론 필요할 때만 수행하더라도 모든 메서드를 확장하는 것은 권장하지 않습니다).

NodeList와 Array는 서로 다른 도구이므로 필요할 때 "캐스팅"할 수 있습니다.

var myArrayFromNodeList = [].slice.call(document.querySelectorAll('.selector'));

그러나 그것은 또 다른 Array.prototype 해킹이며 저도 추천하지 않습니다. 그건 그렇고 IE에서는 작동하지 않습니다 (누가 IE에 대해 걱정합니까?)

더 나은 방법으로 이를 달성할 수 있는 방법은 무엇입니까?

var myNodeList = document.querySelectorAll('.selector');
var myArrayFromNodeList = []; // empty at first

for (var i = 0; i < myNodeList.length; i++) {
  myArrayFromNodeList.push(myNodeList[i]); // push it, babe
}

확인해 봐:

  console.log(myNodeList); // NodeList
  console.log(myArrayFromNodeList); // Array of Nodes

좋아, for 루프가 있는 메인 스레드로 돌아가자:

for (i = 0; i < elements.length; ++i) {
  console.log("iteration worked", elements[i]);
}

forEach... 또?

// forEach method, could be shipped as part of an Object Literal/Module

var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]);
  }
};

// optionally change the scope as final parameter too
forEach(elements, function (index, value) {
  console.log(index, value);
});

면책 조항: 이것은 교육 목적을 위한 것이지만 forEach 또는 기타 내장 메소드를 사용하여 var의 이름을 지정하지 마십시오.

이제 for...of 루프에 대해 이야기할 시간입니다.

for (const element of elements) {
  element.addEventListener('click', () => {
    console.log("iteration worked", elements);
  });
}

글쎄, 감사하면 이것이 끝입니다 ... 그것은 아닙니다! 우리는 ES6 Spread Operator에 대해 이야기하지 않았습니다!

[...elements].forEach((element) => {
  element.addEventListener('click', () => {
    console.log("spread forEach worked", element);
  });
});

그리고 물론 두 가지 더 많은 고전인 while 루프:

let i = 0;
while(elements[i] !== undefined) {
  console.log(elements[i]);
  ++i;
}

그리고 ... 동안!

i = 0;
do {
  console.log(elements[i]);
  ++i;
} while (elements[i] !== undefined);

do...while은 조건을 확인하기 전에 항상 한 번 실행되므로 대괄호 사이에서 수행하는 작업에 따라 나쁘거나 더 나쁠 수 있는 오류를 원하지 않는 한 최소한 한 번은 true인지 확인해야 합니다. 예를 들어

i = undefined;
do {
  console.log(elements[i]);
  ++i;
} while (elements[i] !== undefined);

NaN 또는 결국 undefined를 반환합니다.


그것이 전부입니다. 당신이 할 수 있는 것과 하지 말아야 할 것에 대해 배웠기를 바랍니다. NodeList를 반복하는 다른 방법을 알고 있습니까?

질문이 있으신가요? 😄 댓글로 알려주세요.

친애하는,

조엘