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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getElementsByTagNameChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 5Opera Full support 5.1Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

Vedi anche