DOM - Наборы элементов

Метод 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;

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

  1. Создадим набор всех элементов <p>
  2. Выведем на экран длину этого набора

Свойство length бывает полезно, когда необходимо в цикле обойти все элементы набора.

В следующем примере изменяется фоновый цвет всех элементов <p>:


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

Внимание! HTMLCollection — это НЕ массив! HTMLCollection может выглядеть как массив, но на самом деле им не является. Вы можете в цикле проходить по списку элементов и ссылаться на элементы по их номерам (как в массиве), но вы не можете использовать методы массива valueOf(), pop(), push() или join() с HTMLCollection.