JavaScript 루프 querySelector모든 결과

querySelectorAll() 쿼리의 마법 같은 결과인 NodeList에 대해 이야기해 봅시다.

배열은 아니지만 배열처럼 보이고 작동합니다.
이러한 요소를 반복하는 것은 까다로울 수 있으며 여러 가지 방법으로 반복할 수 있습니다.

선택기의 모양:

const items = document.querySelectorAll('li');
console.log(items);

결과:

1. 기본 for 루프

이것은 지금까지 지원되는 가장 좋은 방법이며 가능한 한 많은 브라우저를 지원하는 경우 이것이 갈 길입니다.

for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    console.log(`Text = ${items[i].innerText}`);
  });
}

그것은 가장 현대적이거나 눈에 띄는 매력적인 방법이 아닙니다.

2. for...of 루프

for...of 루프를 사용할 수도 있습니다.

for (const item of items) {
  item.addEventListener('click', () => {
    console.log(`2: Text = ${item.innerText}`);
  });
}

이것은 모든 최신 브라우저에서 지원되며 꽤 잘 작동합니다.

3. forEach 루프

내가 가장 좋아하는 루프 NodeList 요소는 forEach 루프입니다.

가장 쉬운 방법이지만 최신 브라우저에서만 작동합니다.

items.forEach(item => {
  item.addEventListener('click', () => {
    console.log(`3: Text = ${item.innerText}`);
  });
});

이 메서드는 이전에 배열로 변환하여 확장할 수 있습니다.

[].forEach.call(items, function(item) {
  item.addEventListener('click', function() {
    console.log(`3.1: Text = ${item.innerText}`);
  });
});

또는 스프레드 연산자를 사용하여 배열로 변환할 수 있습니다.

[...items].forEach(item => {
  item.addEventListener('click', () => {
    console.log(`3.2: Text = ${item.innerText}`);
  });
});

이제 nodeList 요소를 반복하는 방법에 대한 세 가지 방법(+ 반복)이 있습니다.

이 Codepen으로 놀 수도 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나