쯔이's Dev

JS(8). NodeList, forEach, 화살표함수 본문

카테고리 없음

JS(8). NodeList, forEach, 화살표함수

jjhim531 2025. 1. 3. 22:34
반응형

1. NodeList란?

NodeList는 JavaScript에서 DOM 요소를 선택할 때 반환되는 "노드들의 리스트".

노드는 HTML 문서의 모든 구성 요소를 말한다.

     - 브라우저가 HTML 문서를 읽고 DOM(Document Object Model)을 생성하는데, 이 DOM을 구성하는 기본 단위.

예를 들어, document.querySelectorAll() 같은 메서드를 사용하면, 조건에 맞는 모든 요소를 NodeList 형태로 반환한다.

* 특징

    1. 유사 배열(Iterable):
      • NodeList는 배열처럼 순회(for, forEach)할 수 있다.
      • 하지만 실제 배열은 아니다. 예를 들어, push 같은 배열 메서드는 사용할 수 없다. 
        • NodeList에서 사용할 수 없는 배열 메서드
          push 배열의 끝에 요소를 추가
          pop 배열의 마지막 요소를 제거
          shift 배열의 첫 번째 요소를 제거
          unshift 배열의 맨 앞에 요소를 추가
          splice 배열의 특정 위치에서 요소를 추가/삭제
          slice 배열의 일부분을 새 배열로 반환
          concat 두 배열을 합쳐 새 배열을 생성
          includes 배열에 특정 요소가 포함되어 있는지 확인
          map 각 요소에 대해 주어진 콜백을 실행하고 새 배열 반환
          filter 조건에 맞는 요소들로만 새 배열 생성
          reduce 배열을 하나의 값으로 축약
          >> 예제: NodeList에서 바로 push나 map을 사용하려고 하면? 
          const nodeList = document.querySelectorAll(".item");

// NodeList에서 push 사용 시 오류 발생
nodeList.push("New Item"); // 오류: nodeList.push is not a function

// NodeList에서 map 사용 시 오류 발생
nodeList.map(item => item.textContent); // 오류: nodeList.map is not a function
      • NodeList에서 사용할 수 있는 배열 메서드
        forEach 각 요소에 대해 콜백 함수를 실행
        item 특정 인덱스의 요소를 반환
        >> 예제: NodeList에서 사용 가능한 메서드
      • const nodeList = document.querySelectorAll(".item");

// forEach 사용
nodeList.forEach(item => console.log(item.textContent));

// item 사용
console.log(nodeList.item(0)); // NodeList의 첫 번째 요소
    2. NodeList를 배열로 변환
      • NodeList는 배열이 아니기 때문에, 배열 메서드를 사용하려면 NodeList를 배열로 변환해야 한다.

* Array.from()

const nodeList = document.querySelectorAll(".item");
const array = Array.from(nodeList);

array.push("New Item"); // 배열 메서드 사용 가능
console.log(array);

* 스프레드 연산자(...)

const nodeList = document.querySelectorAll(".item");
const array = [...nodeList];

array.map(item => console.log(item.textContent)); // 배열 메서드 사용 가능

 

 

2.DOM 노드를 포함:

  • NodeList에는 HTML 요소뿐만 아니라 텍스트 노드나 주석 노드 같은 다른 노드도 포함될 수 있다.

3. 정적/동적 NodeList:

  • querySelectorAll로 반환된 NodeList는 정적(Static) NodeList로, DOM이 변경되어도 자동으로 업데이트되지 않는다.
  • 반면, getElementsByClassName 같은 메서드는 HTMLCollection을 반환하며, 동적(Dynamic)으로 DOM 변경을 반영한다.
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

<script>
  const nodeList = document.querySelectorAll(".item");
  console.log(nodeList); // NodeList(3) [div.item, div.item, div.item]
  console.log(nodeList[0]); // 첫 번째 요소: <div class="item">Item 1</div>
</script>

2. forEach와 화살표 함수

forEach란?

forEach는 배열이나 NodeList 같은 반복 가능한 객체의 각 항목을 순회하면서, 주어진 함수를 실행하는 메서드.

화살표 함수( => )란?

화살표 함수는 JavaScript에서 간결하게 함수를 작성할 수 있는 문법.
다음 두 코드는 같은 의미다.

// 일반 함수
nodeList.forEach(function(el) {
    console.log(el);
});

// 화살표 함수
nodeList.forEach(el => console.log(el));
el => console.log(el)은 아래와 같이 풀어쓸 수 있다.

function(el) {
    console.log(el);
}

3. 화살표 함수가 forEach에서 쓰이는 이유

const nodeList = document.querySelectorAll(".item");

// 화살표 함수로 순회
nodeList.forEach(el => console.log(el.textContent));

// 위 코드는 아래와 같다
nodeList.forEach(function(el) {
    console.log(el.textContent);
});

 

 

  • el은 NodeList의 각 항목(노드)을 의미.
  • => 뒤에 실행할 코드를 적어주면, 각각의 노드에서 동작을 수행할 수 있어.
  • 결과적으로, NodeList에 포함된 모든 요소의 내용을 출력. 

결론

  1. NodeList란?
    • DOM 노드들의 리스트.
    • 배열처럼 for 또는 forEach로 순회할 수 있음.
  2. 화살표 함수란?
    • 간단하고 직관적으로 함수를 작성할 수 있는 문법.
    • el => console.log(el)는 각 항목(el)에 대해 console.log(el)를 실행하는 함수와 같음.
  3. forEach와 화살표 함수의 조합:
    • 간결하고 직관적인 코드 작성에 유용.

 

728x90
반응형