DOM Node List

JavaScript DOM NodeList: Iteration, Array Conversion, & Deep Dive

A NodeList is a collection of DOM nodes returned by properties like Node.childNodes or methods like document.querySelectorAll(). Unlike HTMLCollection, NodeList prototype natively includes a .forEach() iteration method.

NodeList API Capabilities

flowchart LR
    NodeListObj["NodeList (from querySelectorAll)"] --> Methods["Native Prototypes"]
    Methods --> M1[".length"]
    Methods --> M2[".forEach(callback)"]
    Methods --> M3[".item(index)"]
    Methods --> M4[".entries() / .keys() / .values()"]

NodeList Features Reference

Practical Code Example

// Demonstrating NodeList native iteration and Array conversion

document.addEventListener("DOMContentLoaded", () => {
  const listHtml = `
    <ul id="tech-list">
      <li data-status="done">HTML5</li>
      <li data-status="done">CSS3</li>
      <li data-status="pending">JavaScript</li>
    </ul>
  `;
  document.body.insertAdjacentHTML("beforeend", listHtml);

  // Querying static NodeList
  const listItems = document.querySelectorAll("#tech-list li");

  // 1. Native NodeList.forEach() Iteration
  console.log("--- Native NodeList forEach ---");
  listItems.forEach((li, idx) => {
    console.log(`[Item #${idx}]: ${li.textContent} (Status: ${li.dataset.status})`);
  });

  // 2. Converting NodeList to Array to use filter and map
  const doneItemsText = Array.from(listItems)
    .filter(li => li.dataset.status === "done")
    .map(li => li.textContent);

  console.log("Completed Tech Items (via Array filter/map):", doneItemsText);
});

Best Practices & Gotchas

• Use Native NodeList.forEach(): Modern browsers support nodeList.forEach(). You do not need to convert a NodeList to an array if you only need to loop through items.
• Convert to Array for map() / filter(): Convert NodeList to an array (Array.from(nodeList)) whenever functional transformations are required.
• Static vs Live NodeLists: Remember that querySelectorAll() returns a static snapshot NodeList, while element.childNodes returns a live NodeList.

Self-Check Challenge

Write a one-liner to convert a querySelectorAll("p") NodeList into an array of text content strings using Array.from().