Различные способы итерации NodeList и поиска определенного элемента

В Javascript document.querySelectorAll( ‘selector’ ) ищет все элементы в документе, соответствующие указанному селектору CSS.

Проблема может заключаться в том, что querySelectorAll возвращает NodeList, который представляет собой набор узлов, но на самом деле это не массив, из-за этого мы не можем использовать методы, которые мы находим в объекте Array.

Методы в NodeList:

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

Как видите, некоторые из них являются итераторами, но нам потребуются дополнительные шаги, чтобы получить конкретный элемент из этого NodeList.

Представьте, что у нас есть коллекция тегов привязки, и мы хотим найти элемент для определенного URL-адреса.

const allInputs = document.querySelectorAll( ‘a’ );
const urlToSearch = ‘https://github.com/byverdu';
let found;
let position;
// Using forEach
allInputs.forEach(( link, index ) => {
 // We’ll need to know the position where the elements is placed
 if (link.href.indexOf( urlToSearch ) !== -1 ) {
 position = index;
 }
});
found = allInputs[ position ];
// Using a for loop
for ( let i = 0; i <= allInputs.length; i++ ) {
 // We’ll need to know the position where the elements is placed
 if (allInputs[ i ].href.indexOf( urlToSearch ) !== -1 ) {
 position = index;
 }
}
found = allInputs[ position ];
// Kind of a hack
found = [].find.call( allInputs, link => link.href === urlToSearch );
// Only will work if using es6
found = Array.from( allInputs ).find( link => link.href === urlToSearch );
// We could do it in this way too
found = Array.from(
 document.querySelectorAll( ‘a’ )
 ).find(
 link => link.href === urlToSearch
 );
// Also with spread operator
found = [...document.querySelectorAll( ‘a’ )]
  .find(
     link => link.href === urlToSearch
  );