Méthode HTML DOM getElementsByTagName()
❮ L'objet élémentExemple
Modifiez le contenu HTML du premier élément <li> (index 0) d'une liste :
var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";
Définition et utilisation
La méthode getElementsByTagName() renvoie une collection d'éléments enfants d'un élément avec le nom de balise spécifié, en tant qu'objet NodeList.
L'objet NodeList représente une collection de nœuds. Les nœuds sont accessibles par des numéros d'index. L'indice commence à 0.
Conseil : Vous pouvez utiliser la propriété length de l'objet NodeList pour déterminer le nombre de nœuds enfants avec le nom de balise spécifié, puis vous pouvez parcourir tous les nœuds et extraire les informations souhaitées.
Astuce : La valeur de paramètre "*" renvoie tous les éléments enfants de l'élément.
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la méthode.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByTagName() | 1.0 | 6.0 | 3.0 | 3.0 | 9.5 |
Syntaxe
element.getElementsByTagName(tagname)
Valeurs des paramètres
| Parameter | Type | Description |
|---|---|---|
| tagname | String | Required. The tagname of the child elements you want to get |
Détails techniques
| Version DOM | Objet élément de niveau 1 de base |
|---|---|
| Valeur de retour : | Un objet NodeList, représentant une collection d'éléments enfants de l'élément avec le tagname spécifié. Les éléments de la collection renvoyée sont triés tels qu'ils apparaissent dans le code source. |
Plus d'exemples
Exemple
Découvrez combien d'éléments <p> il y a dans un élément <div> (en utilisant la propriété length de l'objet NodeList) :
var x =
document.getElementById("myDIV").getElementsByTagName("P").length;
Exemple
Modifiez la couleur d'arrière-plan du deuxième élément <p> (index 1) à l'intérieur d'un élément <div> :
var x =
document.getElementById("myDIV");
x.getElementsByTagName("P")[1].style.backgroundColor = "red";
Exemple
Modifiez la couleur d'arrière-plan de tous les éléments <p> à l'intérieur d'un élément <div> :
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("P");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
Exemple
Modifiez la couleur d'arrière-plan du quatrième élément (index 3) à l'intérieur d'un élément <div> :
var x = document.getElementById("myDIV");
x.getElementsByTagName("*")[3].style.backgroundColor = "red";
Exemple
Utilisation du paramètre "*".
Modifiez la couleur d'arrière-plan de tous les éléments à l'intérieur d'un élément <div> :
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("*");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
Pages connexes
Référence JavaScript : document.getElementsByTagName()
Tutoriel JavaScript : Liste de nœuds JavaScript HTML DOM
❮ L'objet élément