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() (en-US) è 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

BCD tables only load in the browser

Vedi anche