document.getElementsByTagName

« Référence du DOM

Résumé

Renvoie une liste des éléments avec le nom de balise donné. La recherche se fait dans tout le document, y compris le nœud racine.

Syntaxe

elements = document.getElementsByTagName(nom)

Paramètres

  • 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 ».

Exemple

Dans l'exemple qui suit, getElementsByTagName part d'un élément parent particulier, et recherche en profondeur les éléments descendants portant un certain nom.

Notez que lorsque le nœud sur lequel getElementsByTagName est appelé n'est pas le nœud document, c'est en fait la méthode element.getElementsByTagName qui est utilisée.

<html>

<head>
<title>Exemple de getElementsByTagName</title>

<script type="text/javascript">

function getAllParaElems()
{
  var allParas = document.getElementsByTagName("p");

  var num = allParas.length;

  alert("Il y a " + num + " éléments <p> dans ce document.");
}


function div1ParaElems()
{
  var div1 = document.getElementById("div1")
  var div1Paras = div1.getElementsByTagName("p");

  var num = div1Paras.length;

  alert("Il y a " + num + " éléments <p> dans l'élément div1.");
}


function div2ParaElems()
{
  var div2 = document.getElementById("div2")
  var div2Paras = div2.getElementsByTagName("p");

  var num = div2Paras.length;

  alert("Il y a " + num + " éléments <p> dans l'élément div2.");
}

</script>
</head>

<body style="border: solid green 3px">
<p>Un peu de texte à l'extérieur.</p>
<p>Un peu de texte à l'extérieur.</p>

  <div id="div1" style="border: solid blue 3px">
    <p>Un peu de texte dans div1.</p>
    <p>Un peu de texte dans div1.</p>
    <p>Un peu de texte dans div1.</p>

    <div id="div2" style="border: solid red 3px">
    <p>Un peu de texte dans div2.</p>
    <p>Un peu de texte dans div2.</p>
    </div>
  </div>

<p>Un peu de texte à l'extérieur.</p>
<p>Un peu de texte à l'extérieur.</p>

<button onclick="getAllParaElems();">
 Compte les éléments p dans le document</button><br />

<button onclick="div1ParaElems();">
 Compte les éléments p dans l'élément div1</button><br />

<button onclick="div2ParaElems();">
 Compte les éléments p dans l'élément div2</button>

</body>
</html>

Spécification

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : tregagnon, BenoitL, n_g, fkhannouf, Mgjbot
Dernière mise à jour par : n_g,