Интерфейс HTMLCollection представляет собой общую коллекцию (подобный массиву объект, похожий на arguments) элементов (в порядке документа) и предлагает методы и свойства для выбора из списка. — МДН Защита

HTMLCollection в HTML DOM активен; он автоматически обновляется при изменении базового документа.

Создание коллекции HTML

Объект HTMLCollection возвращается с использованием getElementsByTagName . В следующем примере выбираются все элементы <p> в документе:

const elements = document.getElementsByTagName('p');

Доступ к элементам в коллекции можно получить по индексу (начинается с 0). Если вы хотите получить доступ ко вторым элементам коллекции, мы можем написать:

const secondElement = document.getElementsBYTagName('p')[1];

Характеристики

HTMLCollection.length

Свойство HTMLCollection.length является только для чтения свойством HTMLCollection, которое возвращает количество элементов в коллекции.

const elements = document.getElementsByTagName('p');
console.log(elements.length); // print the total elements

Методы

HTMLCollection.item

HTMLCollection.item is Возвращает конкретный узел в заданном index с отсчетом от нуля в список. Возвращает null, если index выходит за пределы допустимого диапазона.

Альтернатива доступу к collection[i] (который вместо этого возвращает undefined, когда i выходит за пределы). Это в основном полезно для реализаций DOM без JavaScript.

const elements = document.getElementsByTagName('p');
  
var ele1 = c.item(0);  // You can use the item() method this way
var ele2 = c[1];      // But this notation is easier and more common

HTMLCollection.namedItem

Возвращает конкретный узел, чей идентификатор или, в качестве запасного варианта, имя соответствует строке, заданной параметром name. Сопоставление по имени выполняется только в крайнем случае, только в HTML и только в том случае, если элемент, на который указывает ссылка, поддерживает атрибут name. Возвращает null, если узла с заданным именем не существует.

Альтернатива доступу к collection[name] (который вместо этого возвращает undefined, когда name не существует). Это в основном полезно для реализаций DOM без JavaScript.

const elements = document.getElementsByTagName('p');
// Select <p> with id 'news'.
const element = elements.namedItem("news");

Перебор HTMLCollection

Мы можем повторять сбор, используя цикл for и оператор for…of.

const elements = document.getElementsByClassName('news');
let allInnerHTML= "";
//for loop
for (let i = 0; i < elements.length; i++) {
  allInnerHTML += elements[i].innerHTML;
}
// for...of
for (let ele of elements {
  allInnerHTML += ele.innerHTML;
}
// allInnerHTML is now all the HTML for the news class

Надеюсь, вам понравился пост и вы узнали что-то новое 👍. Если да, пожалуйста, дайте мне немного аплодисментов 👏