Document.getElementsByTagName()

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 HTMLCollection dinamica (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.

Le ultime specifiche W3C dicono che gli elementi sono una 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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`getElementsByTagName`	Chrome Full support 1	Edge Full support 12	Firefox Full support Yes	IE ?	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	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 suo id
document.getElementsByName() per tornare a fare riferimento a un elemento con il suo name
document.querySelector() per potenti selettori tramite queries come 'div.myclass'

Ultima modifica: Mar 18, 2019, dai collaboratori di MDN