Maneras de iterar un NodeList para buscar algún elemento.

En Javascript, con document.querySelectorAll( 'selector' ) vamos a buscar todos los elementos en el documento que coincidan con el selector CSS especificado.

El problema vendría a ser que querySelectorAll devuelve un NodeList que es una colección de nodos pero sin ser un Array, por lo que no vamos a poder usar los métodos que encontramos en el objeto Array;

Los métodos que posee NodeList son:

  • NodeList.item()
  • NodeList.entries()
  • NodeList.forEach()
  • NodeList.keys()
  • NodeList.values()

Como puedes ver hay maneras de iterar sobre ellos pero necesitamos varios pasos si queremos encontrar algún elemento dentro de esa colección de Nodes.

Ahora os explicaré diferentes maneras de como iterar un NodeList, iremos de las más laboriosas a las one-liners.

Pongamos que queremos buscar un link a través de de su atributo href;

Pero si eso se puede hacer usando document.querySelector( 'a[href="awesome.co.uk"]' ) duhhh.

const allInputs = document.querySelectorAll( 'a' );  
const urlToSearch = 'https://github.com/byverdu';  
let found;  
let position;  
// Usando forEach
allInputs.forEach(( link, index ) => {  
  // Vamos a necesitar saber en que posición se encuentra el elemento
  if (link.href.indexOf( urlToSearch ) !== -1 ) {
    position = index;
  }
});
found = allInputs[ position ];  
// Usando una for loop
for ( let i = 0; i <= allInputs.length; i++ ) {  
  // Vamos a necesitar saber en que posición se encuentra el elemento
  if (allInputs[ i ].href.indexOf( urlToSearch ) !== -1 ) {
    position = index;
  }
}
found = allInputs[ position ];  
// Usando un hack
found = [].find.call( allInputs, link => link.href === urlToSearch );  
// solo funciona si usas es6
found = Array.from( allInputs ).find( link => link.href === urlToSearch );

// también podríamos hacerlo de la siguiente manera
found = Array.from(  
  document.querySelectorAll( 'a' )
  ).find(
    link => link.href === urlToSearch
  );

Documentación para NodeList

comments powered by Disqus