Il metodo getElementsByTagName dell'interfaccia Document ritorna una HTMLCollection di elementi con il tag specificato. Viene cercato il documento completo, incluso il nodo radice. L'HTMLCollection è dinamica, il che significa che si aggiorna automaticamente per rimanere sincronizzato con l'albero del DOM senza dover chiamare di nuovo document.getElementsByTagName().
Sintassi
var elementi = document.getElementsByTagName(nome);
- elementi è una
HTMLCollectiondinamica (ma vedi la nota sotto) degli elementi trovati nell'ordine in cui appaiono nell'albero. - nome è una stringa che rappresenta il nome degli elementi. La stringa speciale "*" rappresenta tutti gli elementi.
HTMLCollection; tuttavia, questo metodo restituisce una NodeList nei browser WebKit. Vedi bug 14869 per i dettagli.Esempio
Nell'esempio seguente, getElementsByTagName() inizia da un particolare elemento padre e ricerca dall'alto verso il basso ricorsivamente attraverso il DOM da quell'elemento padre, una raccolta di tutti i discendenti che corrispondono al parametro nome del tag. Questo documento mostra sia document.getElementsByTagName() che l'identico funzionale Element.getElementsByTagName(), che avvia la ricerca su un elemento specifico all'interno dell'albero del DOM.
Facendo click sui pulsanti viene utilizzato getElementsByTagName() per contare gli elementi del paragrafo discendente di un particolare genitore (il documento stesso o uno dei due elementi <div>).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>esempio di getElementsByTagName</title>
<script>
function getAllParaElems() {
var allParas = document.getElementsByTagName('p');
var num = allParas.length;
alert('Ci sono ' + num + ' paragrafi in questo documento');
}
function div1ParaElems() {
var div1 = document.getElementById('div1');
var div1Paras = div1.getElementsByTagName('p');
var num = div1Paras.length;
alert('Ci sono ' + num + ' paragrafi in #div1');
}
function div2ParaElems() {
var div2 = document.getElementById('div2');
var div2Paras = div2.getElementsByTagName('p');
var num = div2Paras.length;
alert('Ci sono ' + num + ' paragrafi in #div2');
}
</script>
</head>
<body style="border: solid green 3px">
<p>Qualche testo esterno</p>
<p>Qualche testo esterno</p>
<div id="div1" style="border: solid blue 3px">
<p>Qualche testo div1</p>
<p>Qualche testo div1</p>
<p>Qualche testo div1</p>
<div id="div2" style="border: solid red 3px">
<p>Qualche testo div2</p>
<p>Qualche testo div2</p>
</div>
</div>
<p>Qualche testo esterno/p>
<p>Qualche testo esterno</p>
<button onclick="getAllParaElems();">
mostra tutti gli elementi p nel documento</button><br />
<button onclick="div1ParaElems();">
mostra tutti gli elementi p nell'elemento div1</button><br />
<button onclick="div2ParaElems();">
mostra tutti gli elementi p nell'elemento div2</button>
</body>
</html>
Note
Quando chiamato su un documento HTML, getElementsByTagName() converte in minuscolo il suo argomento prima di procedere. Ciò non è desiderabile quando si cerca di far corrispondere gli elementi SVG di camelCase in una sottostruttura in un documento HTML. document.getElementsByTagNameNS() è utile in questo caso. Vedi anche bug 499656.
document.getElementsByTagName() è simile a Element.getElementsByTagName(), ad eccezione del fatto che la sua ricerca comprende l'intero documento.
Specifiche
Compatibilità con i browser
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Basic support | Chrome Full support Yes | Edge ? | Firefox Full support Yes | IE ? | Opera ? | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile ? | Firefox Android Full support Yes | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
Vedi anche
Element.getElementsByTagName()document.getElementById()per tornare a fare riferimento a un elemento con il suoiddocument.getElementsByName()per tornare a fare riferimento a un elemento con il suonamedocument.querySelector()per potenti selettori tramite queries come'div.myclass'