Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
document.getElementsByTagName
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Renvoie uneHTMLCollection des éléments avec le nom de balise donné. Le document complet est recherché, y compris le nœud racine. LeHTMLCollection 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);elementsest une liste de nœuds (NodeList) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre.nomest 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 queelements est uneHTMLCollection ; cependant cette méthode renvoie uneNodeList dans les navigateurs WebKit. Voirbug Firefox 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 dename. Cela démontre à la foisdocument.getElementsByTagName() et son homologueElement.getElementsByTagName (), qui lance la recherche sur un élément spécifique dans l'arbre DOM.
Cliquer sur les boutons utilisegetElementsByTagName() 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> <p>Some outer text</p> <p>Some outer text</p> <div> <p>Some div1 text</p> <p>Some div1 text</p> <p>Some div1 text</p> <div> <p>Some div2 text</p> <p>Some div2 text</p> </div> </div> <p>Some outer text</p> <p>Some outer text</p> <button>show all p elements in document</button ><br /> <button> show all p elements in div1 element</button ><br /> <button> 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 lebug Firefox 499656.
document.getElementsByTagName() est similaire àelement.getElementsByTagName (), sauf que sa recherche englobe tout le document.
Spécifications
Voir aussi
Element.getElementsByTagName()document.getElementById()pour renvoyer une référence à un élément par sonid(identifiant)document.getElementsByName()pour renvoyer une référence à un élément par sonname(nom)document.querySelector()pour les sélecteurs puissants via des requêtes comme'div.myclass'