Retourner à la page d'accueil de TJS

Méthode : window.document.getElementById()

Compatible Internet Explorer / Edge  Compatible Chrome  Compatible Safari  Compatible Firefox  Compatible Opera  

Retourne un élément du DOM à partir de son identifiant

Syntaxe
HTMLElement document.getElementById(String id)

Description
Retourne un objet HTMLElement à partir de son identifiant, défini dans la propriété id de la balise de l'objet.

Ne pas confondre la propriété 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.

La méthode getElementsByClassName() retourne un tableau d'éléments (Notez le "s" à Elements).
La méthode getElementsByTagName() retourne un tableau d'éléments (Notez le "s" à Elements).

La fonction 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 getElementById pour modifier un div
Code source
<style>
 div.bloc {
   display: inline-block;
   width: 100px;
   border: 1px solid #000;
   margin:5px;
 }
</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
Emulation de la console
Explication
Le script récupère dans la variable div l'objet correspondant au bloc1.
Le script modifie le style de div pour le passer en fond noir.

Exemple Ce qui se passe avec plusieurs id identiques
Code source
<style>
 div.block {
   display: inline-block;
   width: 100px;
   border: 1px solid #000;
   margin:5px;
 }
</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
Emulation de la console
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
Page mise à jour le

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...
Le 24/10/2019 06:05:58 sur php7 en 21.02 ms