[JavaScript] DOM 요소를 배열로 변환

Array.from(document.querySelectorAll('selector'))를 사용하여 DOM 요소를 배열로 변환하는 고급 팁과 관련된 예제를 자세히 설명하겠습니다.


예제 1: DOM 요소를 배열로 변환하고 속성 값 얻기

// HTML에서 다음과 같은 요소가 있다고 가정합니다.
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>

// 'li' 요소를 선택하고 배열로 변환합니다.
const listItems = Array.from(document.querySelectorAll('li'));

// 배열에는 이제 'li' 요소가 들어 있습니다.

// 예제: 첫 번째 'li' 요소의 텍스트 내용을 가져옵니다.
const firstItemText = listItems[0].textContent;
console.log(firstItemText); // 출력: "Item 1"

이 예제에서는 Array.from을 사용하여 'li' 요소를 선택하고 배열로 변환합니다. 그런 다음 배열에서 첫 번째 요소의 텍스트 내용을 가져와 출력합니다.

예제 2: 이벤트 리스너를 여러 요소에 추가하기

// HTML에서 다음과 같은 요소가 있다고 가정합니다.
// <button class="btn">Button 1</button>
// <button class="btn">Button 2</button>
// <button class="btn">Button 3</button>

// 'btn' 클래스를 가진 모든 버튼 요소를 선택하고 배열로 변환합니다.
const buttons = Array.from(document.querySelectorAll('.btn'));

// 모든 버튼에 클릭 이벤트 리스너를 추가합니다.
buttons.forEach(button => {
  button.addEventListener('click', () => {
    console.log(`클릭된 버튼: ${button.textContent}`);
  });
});

이 예제에서는 Array.from을 사용하여 'btn' 클래스를 가진 모든 버튼 요소를 선택하고 배열로 변환합니다. 그런 다음 forEach를 사용하여 각 버튼에 클릭 이벤트 리스너를 추가합니다.