Chuyển NodeList thành Array trong JavaScript

document.querySelectorAll() trả về NodeList (giống mảng nhưng không có map, filter, reduce...). Chuyển thành Array bằng Array.from(nodeList) hoặc [...nodeList] (spread operator).

Ví dụ

Chọn 4 div, chuyển NodeList -> Array, đổi màu nền:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>NodeList to Array</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .sample { display: inline-block; width: 100px; height: 100px; background: blue; color: white; font-size: 20px; font-weight: 500; padding: 10px; margin: 5px; }
  </style>
</head>
<body>
  <h1>Chuyển NodeList thành Array</h1>
  <div class="sample">1</div>
  <div class="sample">2</div>
  <div class="sample">3</div>
  <div class="sample">4</div>
  <br>
  <button class="Btn">ĐỔI MÀU THÀNH ĐỎ</button>
  <h3>Nhấn nút để forEach trên Array.from(NodeList)</h3>
  <script>
    const nodes = document.querySelectorAll('.sample');
    const btn = document.querySelector('.Btn');
    btn.addEventListener('click', () => {
      Array.from(nodes).forEach(el => el.style.backgroundColor = 'red');
      // Hoặc: [...nodes].forEach(...)
    });
  </script>
</body>
</html>

Kết quả

4 ô vuông xanh. Sau khi nhấn nút -> tất cả chuyển sang đỏ.

Lưu ý: NodeList.forEach đã được hỗ trợ rộng rãi, nhưng Array.from cho phép dùng đầy đủ methods mảng.