▶ JavaScript HTML DOM

JavaScript DOM Node Lists: 노드 리스트의 이해와 활용

JavaScript DOM Node Lists는 HTML 문서에서 선택된 여러 노드를 포함하는 컬렉션입니다. 노드 리스트는 여러 DOM 요소를 관리하고 조작하는 데 유용한 도구로, JavaScript에서 DOM을 탐색하고 처리할 수 있도록 도와줍니다. 이 가이드는 Node List의 개념, 사용 방법, 다양한 메서드에 대해 설명합니다.

1. Node List란?

Node List는 DOM에서 여러 노드를 포함하는 컬렉션을 의미합니다. Node List는 다양한 메서드를 통해 생성할 수 있으며, 노드 리스트의 요소는 정적 또는 동적일 수 있습니다.

1.1. 주요 특징

정적 Node List: Node List가 생성된 이후 DOM의 변화에 따라 업데이트되지 않습니다. (예: querySelectorAll())
동적 Node List: Node List가 생성된 이후 DOM의 변화에 따라 자동으로 업데이트됩니다. (예: getElementsByClassName(), getElementsByTagName())

2. Node List 생성 방법

Node List는 여러 가지 방법으로 생성할 수 있습니다.

2.1. `querySelectorAll()`

CSS 선택자를 사용하여 일치하는 모든 요소를 선택하여 Node List를 생성합니다.

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const items = document.querySelectorAll('#myList li');  // <li> 요소를 선택
  console.log(items);  // NodeList 출력
</script>

2.2. `getElementsByClassName()`

특정 클래스 이름을 가진 모든 요소를 선택하여 HTMLCollection을 반환합니다. 이 HTMLCollection은 동적입니다.

<div class="example">Div 1</div>
<div class="example">Div 2</div>

<script>
  const examples = document.getElementsByClassName('example');  // 클래스가 'example'인 <div> 선택
  console.log(examples);  // HTMLCollection 출력
</script>

2.3. `getElementsByTagName()`

특정 태그 이름을 가진 모든 요소를 선택하여 HTMLCollection을 반환합니다. 이 HTMLCollection은 동적입니다.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<script>
  const listItems = document.getElementsByTagName('li');  // 모든 <li> 요소 선택
  console.log(listItems);  // HTMLCollection 출력
</script>

3. Node List 탐색 및 조작

Node List는 여러 노드를 포함하므로, 이를 탐색하고 조작하는 다양한 방법이 있습니다.

3.1. Node List의 길이 확인

Node List의 길이를 확인하려면 length 속성을 사용합니다.

console.log(items.length);  // 선택된 <li> 요소의 개수 출력

3.2. Node List 반복

Node List를 반복하여 각 노드에 접근하고 조작할 수 있습니다.

items.forEach((item) => {
    console.log(item.textContent);  // 각 <li> 요소의 텍스트 출력
});

Node List는 forEach 메서드를 사용할 수 있습니다. 이 메서드는 ES6에서 추가되었습니다.

3.3. 특정 노드 접근

Node List의 특정 요소에 접근하려면 인덱스를 사용합니다.

const firstItem = items[0];  // 첫 번째 <li> 요소 선택
console.log(firstItem.textContent);  // 텍스트 출력

4. Node List 수정

Node List 자체는 수정할 수 없지만, 선택한 요소의 속성이나 스타일을 변경할 수 있습니다.

4.1. 노드 스타일 변경

items.forEach((item) => {
    item.style.color = 'blue';  // 모든 <li> 요소의 텍스트 색상 변경
});

4.2. 노드 내용 변경

items.forEach((item, index) => {
    item.textContent = `Updated Item ${index + 1}`;  // 각 <li> 요소의 텍스트 변경
});

5. 정적 Node List와 동적 HTMLCollection 비교

정적 Node List: querySelectorAll()을 사용하여 생성된 Node List는 DOM 변경에 따라 업데이트되지 않습니다.

<button id="addItem">Add Item</button>

<script>
  const items = document.querySelectorAll('#myList li');

  document.getElementById('addItem').addEventListener('click', () => {
      const newItem = document.createElement('li');
      newItem.textContent = `Item ${items.length + 1}`;
      document.getElementById('myList').appendChild(newItem);  // 새로운 항목 추가

      console.log(items.length);  // 여전히 이전 길이 출력
  });
</script>

동적 HTMLCollection: getElementsByClassName() 또는 getElementsByTagName()로 생성된 HTMLCollection은 DOM 변경 시 자동으로 업데이트됩니다.

<button id="addItem">Add Item</button>

<script>
  const items = document.getElementsByClassName('example');

  document.getElementById('addItem').addEventListener('click', () => {
      const newItem = document.createElement('div');
      newItem.className = 'example';
      newItem.textContent = `Div ${items.length + 1}`;
      document.body.appendChild(newItem);  // 새로운 항목 추가

      console.log(items.length);  // 동적으로 업데이트된 길이 출력
  });
</script>

6. Node List의 다양한 활용 예제

다음은 Node List를 활용하여 웹 페이지에서 다양한 동작을 수행하는 예제입니다.

6.1. 모든 버튼 클릭 이벤트 처리

<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>

<script>
  const buttons = document.querySelectorAll('.btn');

  buttons.forEach((button) => {
      button.addEventListener('click', () => {
          alert(`You clicked ${button.textContent}`);  // 클릭된 버튼의 텍스트 표시
      });
  });
</script>

6.2. 노드 리스트에서 특정 조건의 요소 찾기

<ul id="myList">
  <li class="active">Active Item</li>
  <li>Inactive Item</li>
  <li class="active">Active Item 2</li>
</ul>

<script>
  const activeItems = document.querySelectorAll('#myList .active');  // 활성화된 항목 선택

  activeItems.forEach((item) => {
      console.log(item.textContent);  // 활성화된 항목의 텍스트 출력
  });
</script>

요약

JavaScript DOM Node Lists는 HTML 문서에서 여러 노드를 그룹으로 다루는 방법을 제공합니다. 이를 통해 요소의 선택, 탐색, 조작을 효율적으로 수행할 수 있습니다.

Node List 생성: querySelectorAll()을 사용하여 정적 Node List를 생성하고, getElementsByClassName() 또는 getElementsByTagName()으로 동적 HTMLCollection을 생성합니다.
Node List 탐색: length 속성과 반복 메서드를 사용하여 선택된 노드를 탐색하고 조작합니다.
Node List 수정: 선택한 노드의 속성이나 스타일을 변경할 수 있으며, Node List 자체는 수정할 수 없습니다.
정적과 동적 비교: 정적 Node List는 DOM 변경에 따라 업데이트되지 않지만, 동적 HTMLCollection은 자동으로 업데이트됩니다.

JavaScript의 DOM Node List를 활용하여 동적이고 상호작용적인 웹 애플리케이션을 구축할 수 있습니다.

코딩 스쿨 JavaScript