querySelectorAll()와 NodeList || 태그 선택은 변수에 담아서 반복을 줄임.

😊querySelectorAll()로 선택되는 것들은 NodeList에 객체배열로 담겨져 그 객체의 메서드를 통해서 사용

---

document.querySelectorAll 메서드가 반환하는 NodeList라는 객체는 선택한 요소의 집합입니다. 쉽게 말해, 특정 선택자에 해당하는 여러 개의 DOM 요소들을 리스트 형태로 담고 있는 객체입니다.

예를 들어, HTML 문서에서 .tab-button 클래스를 가진 모든 요소를 선택하려면 다음과 같이 작성할 수 있습니다.

var tabButtons = document.querySelectorAll('.tab-button');

이렇게 하면, .tab-button 클래스를 가진 모든 요소들이 NodeList 객체로 반환되어 tabButtons 변수에 저장됩니다.

NodeList는 배열과 비슷한 형태를 가지고 있지만, 일반 배열의 메서드 (예: map, filter, reduce 등)를 사용할 수 없는 집합입니다.

😊 클래스를 추가하거나 제거하는 작업과 같은 것들을 NodeList의 각 요소에 적용하려면 반복문 (예: for 루프)을 사용해야 합니다.

반복문을 통해 NodeList 내의 각 요소에 접근하면, 각 요소에서는 classList.add나 classList.remove와 같은 메서드를 사용할 수 있습니다.

---

😊복수 개를 선택해서 제어할 때, 아래처럼 NodeList와 반복문을 통해 제어.

• 클래스라고 '.추가할 클래스' 이렇게 점을 추가해선 안된다.

document.querySelectorAll('.tab-button')[0].addEventListener('click', function() {
  let tabButton = document.querySelectorAll('.tab-button'); 
  let tabContent = document.querySelectorAll('.tab-content');
  
  for(let i =0; i< tabButton.length; i++){
    tabButton[i].classList.remove('orange');
    tabContent[i].classList.remove('show');
  }
  document.querySelectorAll('.tab-button')[0].classList.add('orange');
  document.querySelectorAll('.tab-content')[0].classList.add('show');
  
});  

---

😊불러들이는 태그가 동일하면 변수에 저장한 뒤, 변수를 통해 간소화 할 수 있다.

	document.querySelectorAll('.tab-button')[0].classList.add('orange');
    document.querySelectorAll('.tab-content')[0].classList.add('show');