NodeList

🔍 ¿Qué es un NodeList? Un NodeList es una colección de elementos del DOM que se obtiene al usar métodos como document.querySelectorAll(cssSelector). 📊 Similitudes con Arrays Aunque un NodeList no

const paragraphs = document.querySelectorAll("p");

console.log(paragraphs.length); // 2
console.log(paragraphs[0]); // <p>First paragraph</p>
console.log(paragraphs[1]); // <p>Second paragraph</p>

paragraphs.forEach(paragraph => {
    console.log(paragraph); // Muestra cada párrafo uno por uno
});

🚫 Limitaciones de NodeList

Un NodeList no soporta todos los métodos de los arrays:

• ❌ .filter() no funciona: No puedes usar métodos como .filter() directamente en un NodeList.

📝 Obteniendo el texto de los elementos

Para obtener el texto de cada elemento en un NodeList, debes iterar sobre los elementos y acceder a la propiedad .textContent de cada uno.

💡 Ejemplo:

const paragraphs = document.querySelectorAll("p");

paragraphs.forEach(paragraph => {
    console.log(paragraph.textContent); // Muestra el texto de cada párrafo
});

❗ Importante: No puedes llamar paragraphs.textContent directamente en el NodeList, ya que esta propiedad no existe en el objeto NodeList, solo en los elementos individuales.

🔍 ¿Por qué convertir un NodeList a Array?

Sabemos que un NodeList solo soporta .length y .forEach(). Pero, ¿qué pasa si necesitas usar métodos como .map() o .filter()? Aunque no es común, es útil poder aplicar métodos de array en un NodeList.

🛠 Cómo convertir un NodeList a Array

Puedes convertir un NodeList en un array utilizando la sintaxis de propagación (...).

💡 Ejemplo básico:

const divs = document.querySelectorAll("div"); // NodeList
const items = [...divs]; // Array

💡 Ejemplo en una sola línea:

const items = [...document.querySelectorAll("div")]; // Array

💡 Ejemplo de filtro:

const links = document.querySelectorAll("a");
const loginLinks = [...links].filter(link => link.textContent === "Login");
console.log(loginLinks); // Array de 2 enlaces con "Login" como textContent