Retourner à la page d'accueil de TJS

Méthode : window.document.getElementById()

          

Retourne un objet du DOM à partir de son identifiant

Syntaxe
Object document.getElementById(String id)

Description
Retourne un objet HTML à partir de son id, 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ément HTML ont le même id.
getElementsByClassName() retourne un tableau d'éléments.

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 est de type " + typeof 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 est de type " + typeof 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 mise à jour le

Nouveautés du moment sur le site

Maj tuto AJAX avec XMLHTTPRequest

Le tutorial sur la console Javascript

Le format JSON

Les instructions try ... catch

L'objet XMLHttpRequest

Chercher une référence

Le graph des objets Javascript



Chargement
en cours...

Le guide complet du javascript

Le Guide Complet du JavascriptEn savoir plus sur mon livre aux Editions Micro Application
Le 23/06/2017 17:27:56 sur php7 en 11.92 ms