Коллекции HTML DOM на JavaScript

Объект HTMLCollection

getElementsByTagName() Метод возвращает HTMLCollection Объект.

Объект HTMLCollection является списком элементов HTML, представляющим собой класс массива (сборник).

Ниже приведен код, который выбирает все элементы <p> в документе:

Пример

var x = document.getElementsByTagName("p");

Элементы в этом наборе можно получить через индекс.

Чтобы получить доступ ко второму элементу <p>, можно написать так:

y = x[1];

Попробуйте сами

Комментарий:Индекс начинается с 0.

Длина HTMLCollection

length Определение свойств определяет количество элементов в HTMLCollection:

Пример

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

Попробуйте сами

Объяснение примера:

  • Создает集合 всех элементов <p>:
  • Отображает длину集合а

length Свойства полезны, когда вам нужно пройтись по集合у элементов:

Пример

Измените цвет фона всех элементов <p>:

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

Попробуйте сами

HTMLCollection не массив!

HTMLCollection может выглядеть как массив, но это не массив.

Вы можете пройтись по списку и получить элемент по числовому индексу (как в массиве).

Однако, вы не можете использовать методы массива для HTMLCollection, например valueOf()иpop()иpush() или join().