Коллекция JavaScript HTML DOM

В этой главе рассказывается об использовании коллекций DOM.

Объект HTMLCollection

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

Объект HTMLCollection похож на массив, содержащий HTML-элементы.

Следующий код получает все элементы <p> в документе:

Примеры

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

Доступ к элементам коллекции можно получить по индексу (начиная с 0).

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

y = x[1];

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

Свойство length объекта HTMLCollection

Свойство length объекта HTMLCollection определяет количество элементов в коллекции.

Примеры

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

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

Разбор примера

Получить коллекцию элементов <p>:

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

Отобразить количество элементов в коллекции:

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

Свойство 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().

Другие расширения