Kolekcje JavaScript HTML DOM

Obiekt HTMLCollection

getElementsByTagName() Metoda zwraca HTMLCollection Obiekt.

Obiekt HTMLCollection jest listą (zbiorem) elementów HTML, która jest klasą tablicy.

Poniższy kod wybiera wszystkie elementy <p> w dokumencie:

Przykład

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

Elementy w zbiorze można uzyskać za pomocą numeru indeksu.

Aby uzyskać dostęp do drugiego elementu <p>, możesz napisać tak:

y = x[1];

Spróbuj sam!

Komentarz:Indeksy zaczynają się od 0.

Długość HTMLCollection

length Atrybut definiuje liczbę elementów w HTMLCollection:

Przykład

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

Spróbuj sam!

Wyjaśnienie przykładu:

  • Tworzy zbiór wszystkich elementów <p>:
  • Wyświetla długość zbioru

length Atrybuty są użyteczne, gdy chcesz przechodzić przez elementy zbioru:

Przykład

Zmień kolor tła wszystkich elementów <p>:

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

Spróbuj sam!

HTMLCollection nie jest tablicą!

HTMLCollection może wyglądać jak tablica, ale to nie jest tablica.

Możesz przechodzić przez listę i uzyskiwać elementy za pomocą odniesień numerycznych (tak jak w tablicy).

Jednak nie możesz używać metod tablicowych do HTMLCollection, np. valueOf(),pop(),push() lub join().