Интерфейс 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 loopfor (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
Надеюсь, вам понравился пост и вы узнали что-то новое 👍. Если да, пожалуйста, дайте мне немного аплодисментов 👏