Metodo getElementsByTagName() dell'oggetto HTML DOM Document

Definizione e uso

getElementsByTagName() Il metodo restituisce una raccolta di tutti gli elementi con il nome del tag specificato.

getElementsByTagName() Il metodo restituisce HTMLCollection.

getElementsByTagName() L'attributo è di sola lettura.

Nota:getElementsByTagName("*") Restituisce tutti gli elementi nel documento.

HTMLCollection

HTMLCollection È una raccolta di elementi HTML simile a un array (elenco).

Puoi accedere agli elementi della raccolta tramite l'indice (a partire da 0).

length L'attributo restituisce il numero di elementi nella raccolta.

Vedi anche:

Metodo getElementById()

Metodo getElementsByClassName()

Metodo querySelector()

Metodo querySelectorAll()

Oggetto HTMLCollection

Esempio

Esempio 1

Ottieni tutti gli elementi con il nome del tag "li":

const collection = document.getElementsByTagName("li");

Prova a fare tu stesso

Esempio 2

Ottieni tutti gli elementi nel documento:

const collection = document.getElementsByTagName("*");

Prova a fare tu stesso

Esempio 3

Modifica l'HTML interno del primo elemento <p> del documento:

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

Prova a fare tu stesso

Esempio 4

Numero degli elementi <li> nel documento:

let numb = document.getElementsByTagName("li").length;

Prova a fare tu stesso

Esempio 5

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

const collection = document.getElementsByTagName("P");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Prova a fare tu stesso

Sintassi

document.getElementsByTagName(tagName)

Parametro

Parametro Descrizione
tagName Obbligatorio. Il nome del tag dell'elemento.

Valore di ritorno

Tipo Descrizione
Oggetto

Oggetto HTMLCollection.

Set di elementi con il nome del tag specificato.

La sorta è effettuata in base all'ordine di apparizione degli elementi nel documento.

Dettagli tecnici

Questo metodo restituisce un oggetto NodeList (può essere trattato come un array readonly), che contiene tutti gli elementi Element con il nome del tag specificato nel documento, nell'ordine in cui compaiono nel documento sorgente.

L'oggetto NodeList è "vivo", il che significa che se vengono aggiunti o rimossi elementi con il nome del tag specificato nel documento, il suo contenuto viene aggiornato automaticamente.

I documenti HTML non distinguono tra maiuscole e minuscole, quindi è possibile specificare qualsiasi forma di scrittura. tagName, corrisponde a tutti i tag omonimi nel documento, indipendentemente dalla forma di scrittura maiuscola o minuscola utilizzata nel documento sorgente. Ma i documenti XML differiscono per la casistica,tagName Corrisponde solo ai tag con il nome e la forma di scrittura identici nel documento sorgente.

Suggerimento:L'interfaccia Element definisce un metodo omonimo, che ricerca solo il sottoalbero del documento. Inoltre, l'interfaccia HTMLDocument definisce Metodo getElementByName(), ricerca gli elementi basandosi sul valore dell'attributo name (non sul nome del tag).

Supporto del browser

document.getElementsByTagName() È una caratteristica di DOM Level 1 (1998).

Tutti i browser lo supportano:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 9-11 Supporto Supporto Supporto Supporto

Pagine correlate

Manuale di riferimento di JavaScript:element.getElementsByTagName()

Corso di JavaScript:Elenco di nodi HTML DOM JavaScript