Méthode getElementsByTagName() de l'objet HTML DOM Document

Définition et utilisation

getElementsByTagName() La méthode retourne une collection d'éléments ayant le nom de balise spécifié.

getElementsByTagName() La méthode retourne HTMLCollection.

getElementsByTagName() L'attribut est en lecture seule.

Remarque :getElementsByTagName("*") Retourne tous les éléments du document.

HTMLCollection

HTMLCollection Est une collection de types d'éléments HTML similaires à un tableau (liste).

Les éléments de la collection peuvent être accédés par index (commençant à 0).

length L'attribut retourne le nombre d'éléments de la collection.

Veuillez également consulter :

Méthode getElementById()

Méthode getElementsByClassName()

Méthode querySelector()

Méthode querySelectorAll()

Objet HTMLCollection

Exemple

Exemple 1

Obtenir tous les éléments avec le nom de balise "li" :

const collection = document.getElementsByTagName("li");

Essayez-le vous-même

Exemple 2

Obtenir tous les éléments du document :

const collection = document.getElementsByTagName("*");

Essayez-le vous-même

Exemple 3

Modifier l'HTML interne du premier élément <p> du document :

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

Essayez-le vous-même

Exemple 4

Nombre d'éléments <li> dans le document :

let numb = document.getElementsByTagName("li").length;

Essayez-le vous-même

Exemple 5

Modifier la couleur de fond de tous les éléments <p> :

const collection = document.getElementsByTagName("P");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Essayez-le vous-même

Syntaxe

document.getElementsByTagName(tagName)

Paramètres

Paramètres Description
tagName Obligatoire. Le nom de la balise de l'élément.

Valeur de retour

Type Description
Objet

Objet HTMLCollection.

Collection des éléments ayant le même nom de balise.

Trié selon l'ordre d'apparition des éléments dans le document.

Détails techniques

Cette méthode retourne un objet NodeList (qui peut être traité comme un tableau lecture seule), qui contient tous les nœuds Element ayant le même nom dans le document, dans l'ordre dans lequel ils apparaissent dans le document source.

L'objet NodeList est "vivant", c'est-à-dire que si des éléments portant le même nom sont ajoutés ou supprimés dans le document, son contenu se mettra automatiquement à jour.

Les documents HTML ne distinguent pas les majuscules et minuscules, donc vous pouvez spécifier n'importe quelle forme de casse tagName，elle correspondra à toutes les balises portant le même nom dans le document, quelle que soit la casse utilisée dans le document source. Mais les documents XML distinguent les majuscules et minuscules,tagName Seulement les balises qui ont le même nom et la même casse dans le document source sont correspondantes.

Astuce :L'interface Element définit une méthode portant le même nom, qui ne recherche que le sous-arbre du document. De plus, l'interface HTMLDocument définit Méthode getElementByName()，elle recherche les éléments en se basant sur la valeur de l'attribut name (et non sur le nom de la balise).

Support du navigateur

document.getElementsByTagName() C'est une caractéristique de DOM Level 1 (1998).

Tous les navigateurs le supportent :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Pages connexes

Manuel de référence JavaScript :element.getElementsByTagName()

Tutoriel JavaScript :Liste de nœuds HTML DOM JavaScript