Méthode getElementsByTagName() de l'élément HTML DOM

Définition et utilisation

getElementsByTagName() La méthode retourne un ensemble de sous-éléments d'éléments ayant un nom de balise spécifié, sous forme d'objet NodeList.

Astuce :Valeur du paramètre "*" Retourne tous les éléments enfants de l'élément.

Veuillez également consulter :

Méthode getElementsByClassName()

Méthode querySelector()

Méthode querySelectorAll()

NodeList

NodeList Il s'agit d'un ensemble de nœuds similaires à un tableau (liste).

Vous pouvez accéder aux nœuds de la liste par index (index). L'index commence à 0.

Propriété lengthRetourne le nombre de nœuds dans la liste.

Exemple

Exemple 1

Modifier le contenu HTML du premier élément <li> de la liste:

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

Essayez-le vous-même

Exemple 2

Nombre d'éléments <p> dans "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

Essayez-le vous-même

Exemple 3

Modifier la taille de la police du deuxième élément <p> dans "myDIV":

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

Essayez-le vous-même

Exemple 4

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

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

Essayez-le vous-même

Exemple 5

Modifier la couleur de fond de l'élément quatrième (index 3) de "myDIV":

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

Essayez-le vous-même

Exemple 6

Utilisez le paramètre "*" pour changer la couleur de fond de tous les éléments dans "myDIV":

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Essayez-le vous-même

Syntaxe

element.getElementsByTagName(tagname)

Paramètre

Paramètre Description
tagname Obligatoire. Nom de balise du sous-élément.

Retourne

Type Description
NodeList

Fils des éléments portant un nom de balise donné.

Les éléments sont triés suivant leur ordre d'apparition dans le code source.

Détails techniques

getElementsByTagName() Cette méthode parcourt les descendants de l'élément spécifié, et retourne un tableau contenant des éléments (en réalité un objet NodeList), représentant tous les éléments de la document ayant le nom de balise spécifié. L'ordre des éléments dans le tableau est le même que leur ordre d'apparition dans le code source du document.

Attention

Interface DocumentDéfinit également Méthode getElementsByTagName()qui est similaire à cette méthode, mais parcourt tout le document plutôt que les descendants d'un élément.

Ne pas confondre cette méthode avec Méthode getElementsByName() de HTMLDocument Ne pas confondre avec, qui est basé sur la valeur de l'attribut name de l'élément pour rechercher des éléments, plutôt que sur leur nom de balise.

Support du navigateur

Tous les navigateurs le supportent element.getElementsByTagName()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support