Retourner à la page d'accueil de TJS

Méthode : window.document.getElementById()

          

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

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 17/12/2018 11:02:13 sur php7 en 20.79 ms