Kolekcje JavaScript H TML DOM
Obiekt HTMLCollection
Metoda getElementsByTagName()
zwraca HTMLCollection
obiekt.
Obiekt HTMLCollection
to podobna do tablicy lista (kolekcja) elementów HTML.
Poniższy kod wybiera wszystkie <p>
elementy w dokumencie:
Przykład
const myCollection = document.getElementsByTagName("p");
Dostęp do elementów w kolekcji można uzyskać za pomocą numeru indeksu.
Aby uzyskać dostęp do drugiego elementu <p>, możesz napisać:
myCollection[1]
Uwaga: indeks zaczyna się od 0.
Długość kolekcji HTML HTML
Właściwość length
określa liczbę elementów w HTMLCollection
:
Przykład
myCollection.length
Właściwość length
jest przydatna, gdy chcesz przeglądać elementy w kolekcji:
Przykład
Zmień kolor tekstu wszystkich <p> elementów:
const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
Kolekcja HTML NIE jest tablicą!
HTMLCollection może wyglądać jak tablica, ale tak nie jest.
Możesz przeglądać listę i odwoływać się do elementów za pomocą numeru (tak jak tablica).
Nie można jednak używać metod tablicowych, takich jak valueOf(), pop(), push() lub join() w elemencie HTMLCollection.