Metodo getElementsByTagName() dell'elemento HTML DOM

Definizione e uso

getElementsByTagName() Il metodo restituisce una raccolta di figli di elementi con il nome di tag specificato, come oggetto NodeList.

Suggerimento:Valore del parametro "*" Restituisce tutti i figli dell'elemento.

Vedi anche:

Metodo getElementsByClassName()

Metodo querySelector()

Metodo querySelectorAll()

NodeList

NodeList È una raccolta di nodi simili a un array (lista).

Puoi accedere ai nodi nella lista tramite l'indice (indice). L'indice inizia da 0.

Proprietà lengthRestituisce il numero di nodi nella lista.

Esempio

Esempio 1

Modifica il contenuto HTML del primo elemento <li> nella lista:

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

Prova tu stesso

Esempio 2

Il numero di elementi <p> all'interno di "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

Prova tu stesso

Esempio 3

Modifica la dimensione del font del secondo elemento <p> all'interno di "myDIV":

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

Prova tu stesso

Esempio 4

Modifica il colore di sfondo di tutti gli elementi <p> all'interno di "myDIV":

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

Prova tu stesso

Esempio 5

Modifica il colore di sfondo dell'elemento numero 4 (indice 3) all'interno di "myDIV":

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

Prova tu stesso

Esempio 6

Usando il parametro "*", cambia il colore di sfondo di tutti gli elementi in "myDIV":

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Prova tu stesso

Sintassi

element.getElementsByTagName(tagname)

Parametro

Parametro Descrizione
tagname Obbligatorio. Tag del figlio.

Ritorna valore

Tipo Descrizione
NodeList

Figli degli elementi con il nome di tag specificato.

Gli elementi sono ordinati secondo l'ordine di apparizione nel codice sorgente.

Dettagli tecnici

getElementsByTagName() Il metodo esplorerà i figli dell'elemento specificato, restituendo un array di elementi (in realtà un oggetto NodeList), che rappresenta tutti gli elementi del documento che hanno il nome di tag specificato. L'ordine degli elementi nell'array è lo stesso dell'ordine in cui appaiono nel codice sorgente del documento.

Attenzione

Interfaccia DocumentAnche definito Metodo getElementsByTagName(), è simile a questo metodo ma esplora tutto il documento, non i figli dell'elemento.

Non confondere questo metodo con Metodo getElementsByName() di HTMLDocument Non confondere, l'altro si basa sul valore dell'attributo name dell'elemento per cercare l'elemento, non sul nome del tag dell'elemento.

Supporto del browser

Tutti i browser supportano element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto Supporto