Set HTML DOM JavaScript

L'oggetto HTMLCollection

getElementsByTagName() Il metodo restituisce HTMLCollection Oggetto.

L'oggetto HTMLCollection è una lista di elementi HTML (raccolta) di tipo array.

Il seguente codice seleziona tutti gli elementi <p> del documento:

Esempio

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

Gli elementi della raccolta possono essere acceduti tramite l'indice.

Per accedere al secondo elemento <p>, puoi scrivere così:

y = x[1];

Prova tu stesso

Nota:L'indice parte da 0.

Lunghezza HTML HTMLCollection

length La proprietà definisce il numero di elementi nella HTMLCollection:

Esempio

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

Prova tu stesso

Esempio di spiegazione:

  • Crea una raccolta di tutti gli elementi <p>:
  • Mostra la lunghezza della raccolta

length L'attributo è utile quando devi esplorare gli elementi della raccolta:

Esempio

Cambia il colore di sfondo di tutti gli elementi <p>:

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

Prova tu stesso

HTMLCollection non è un array!

HTMLCollection potrebbe sembrare un array, ma non è un array.

Puoi esplorare l'elenco tramite riferimento numerico degli elementi (come un array).

Ma non è possibile utilizzare metodi di array su HTMLCollection, come valueOf()、pop()、push() o join().