Retourne un élément du DOM à partir de son identifiant Syntaxe HTMLElement document.getElementById(String id) Compatible tous navigateurs Description Retourne un objet HTMLElement à partir de son identifiant, défini dans la propriété id de la balise de l'objet.id et la propriété name . Pour trouver tous les objets à partir de leur nom, utilisez getElementsByName() .getElementById retourne un seul élément, même si plusieurs éléments HTML ont le même id .getElementsByClassName() retourne un tableau d'éléments (Notez le "s" à Elements).getElementsByTagName() retourne un tableau d'éléments (Notez le "s" à Elements).getElementById("id") retourne le premier élément de querySelectorAll("#id") .
Equivalent dans d'autres langages Equivalent en
jQuery à
$("#id") :
Fonction qui sélectionne des objets HTML à partir de leur identifiant.
Exemple 1 : getElementById pour modifier un div Code source <style>
div
.bloc {
display : inline -block
;
width : 100
px ;
border : 1
px solid #000
;
margin : 5
px ;
}
</style>
<div class= "bloc" id= "bloc1" > Bloc 1
</div>
<div class= "bloc" id= "bloc2" > Bloc N°2
</div>
<div class= "bloc" id= "bloc3" > 3ème Bloc
</div>
<div class= "bloc" id= "bloc4" > 4ème Bloc
</div>
<script type= "text/javascript" >
var div
= document . getElementById ( "bloc1" );
console . log ( div
);
div
. style
. backgroundColor
= "#000" ;
div
. style
. color
= "#fff" ;
</script> Résultat
Bloc 1
Bloc N°2
3ème Bloc
4ème Bloc
Explication Le script récupère dans la variable div l'objet correspondant au bloc1 .div pour le passer en fond noir.
Exemple 2 : Ce qui se passe avec plusieurs id identiques Code source <style>
div.
block {
display : inline -block
;
width : 100
px ;
border : 1
px solid #000
;
margin : 5
px ;
}
</style>
<div class= "block" id= "myBlock" > Bloc 1
</div>
<div class= "block" id= "myBlock" > Bloc N°2
</div>
<div class= "block" id= "myBlock" > 3ème Bloc
</div>
<div class= "block" id= "myBlock" > 4ème Bloc
</div>
<script type= "text/javascript" >
var div
= document . getElementById ( "myBlock" );
console . log ( div
);
div
. style
. backgroundColor
= "#f00" ;
div
. style
. color
= "#fff" ;
</script> Résultat
Bloc 1
Bloc N°2
3ème Bloc
4ème Bloc
Explication Il y a 4 éléments ayant l'identifiant myBlock .getElementById() retourne le premier trouvé et ignore les suivants.
Page en rapport Introduction au DHTML 15/11/2018
Troisième édition Tout JavaScript chez Dunod En savoir plus Sortie le 4 janvier 2023
Version papier 29€90
Format électronique 22€99.
Commandez en ligne
Fonction qui sélectionne des objets HTML à partir de leur identifiant.
En savoir plus
