Renvoie une HTMLCollection des éléments avec le nom de balise donné. Le document complet est recherché, y compris le nœud racine. Le HTMLCollection renvoyée est en direct, ce qui signifie qu'elle se met à jour automatiquement pour rester synchronisée avec l'arborescence DOM sans avoir à rappeler document.getElementsByTagName ().

Syntaxe

var elements = document.getElementsByTagName(name);
  • elements est une liste de nœuds (NodeList) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre.
  • nom est une chaîne représentant le nom des éléments. La chaîne spéciale "*" représente « tous les éléments ».

Note : La dernière spécification W3C dit que  elements est une   HTMLCollection ; cependant cette méthode renvoie une  NodeList dans les navigateurs WebKit. Voir  bug 14869 pour plus de détails.

Exemple

Dans l'exemple suivant, getElementsByTagName() commence à partir d'un élément parent particulier et effectue une recherche descendante récursive dans le DOM à partir de cet élément parent, en créant une collection de tous les éléments descendants qui correspondent au paramètre de name. Cela démontre à la fois document.getElementsByTagName() et son homologue Element.getElementsByTagName (), qui lance la recherche sur un élément spécifique dans l'arbre DOM.

Cliquer sur les boutons utilise getElementsByTagName() pour compter les éléments de paragraphe descendant d'un parent particulier (le document lui-même ou l'un des éléments <div> imbriqués).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>getElementsByTagName example</title>
  <script>
    function getAllParaElems() {
      var allParas = document.getElementsByTagName('p');
      var num = allParas.length;
      alert('There are ' + num + ' paragraph in this document');
    }

    function div1ParaElems() {
      var div1 = document.getElementById('div1');
      var div1Paras = div1.getElementsByTagName('p');
      var num = div1Paras.length;
      alert('There are ' + num + ' paragraph in #div1');
    }

    function div2ParaElems() {
      var div2 = document.getElementById('div2');
      var div2Paras = div2.getElementsByTagName('p');
      var num = div2Paras.length;
      alert('There are ' + num + ' paragraph in #div2');
    }
  </script>
</head> 
<body style="border: solid green 3px">
  <p>Some outer text</p>
  <p>Some outer text</p>      

  <div id="div1" style="border: solid blue 3px">
    <p>Some div1 text</p>
    <p>Some div1 text</p>
    <p>Some div1 text</p>     

    <div id="div2" style="border: solid red 3px">
      <p>Some div2 text</p>
      <p>Some div2 text</p>
    </div>
  </div>

  <p>Some outer text</p>
  <p>Some outer text</p>

  <button onclick="getAllParaElems();">
    show all p elements in document</button><br />

  <button onclick="div1ParaElems();">
    show all p elements in div1 element</button><br />

  <button onclick="div2ParaElems();">
    show all p elements in div2 element</button>
        
</body>
</html>

Notes

Lorsqu'elle est appelée sur un document HTML, getElementsByTagName() classe son argument avant de continuer. Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML. document.getElementsByTagNameNS () est utile dans ce cas. Voir aussi bug 499656.

document.getElementsByTagName() est similaire à element.getElementsByTagName (), sauf que sa recherche englobe tout le document.

Spécifications

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : loella16, fscholz, teoli, arunpandianp, n_g, tregagnon, fkhannouf, Mgjbot, BenoitL
 Dernière mise à jour par : loella16,