153-image1-fr1234776248.jpg

JavaScript : utiliser la méthode document.getElementById

En javascript, savoir utiliser la méthode getElementById() de l’objet document est très pratique car elle vous permet d’accéder à un élément unique de votre page web facilement pour, par exemple, modifier le style CSS de l’élément, récupérer des informations sur l’élément, etc.
 
Pour ce billet, je vais utiliser la méthode document.getElementById() pour :
 
 
 
 
  • modifier le style CSS d’un div (ex : la couleur d’arrière plan)
  • modifier la valeur d’un champ texte
  • récupérer le contenu d’un div
  • ajouter le focus sur un champ texte
 
Pour utiliser getElementById, il faut d’abord attribuer un identifiant à un élément de la page HTML via l’attribut id.
 
Par exemple :
 
<div id="div1"></div>
 
Ici, je viens d’identifier de manière unique la balise <div> grâce à la valeur "div1" de l’attribut id. ATTENTION ! Aucun autre élément de la page ne doit avoir le même attribut id avec la même valeur, sous peine de faire buguer javascript.
 
Ensuite, pour appeler ce div via javascript, voici la commande :
 
document.getElementById("div1");
 

EXEMPLE 1 : getElementById.style (modifier la couleur de fond d’un div)

<html>
<head>
<style>
#div1{
background-color:#ff0000;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Vert" onclick="javascript:document.getElementById(‘div1′).style.backgroundColor=’#00ff00’;" />
<input type="button" value="Rouge" onclick="javascript:document.getElementById(‘div1′).style.backgroundColor=’#ff0000’;" />
</body>
</html>
 
 Exemple en action :
 
 
 

EXEMPLE 2 : getElementById.value (modifier la valeur d’un champ texte)

<html>
<head>
</head>
<body>
<input type="text" id="input1" value="2" readonly="readonly" />
<input type="button" value="Multiplier par 2" onclick="javascript:document.getElementById(‘input1’).value=document.getElementById(‘input1’).value*2;" />
</body>
</html>
 
Exemple en action :
 
 

EXEMPLE 3 : getElementById.innerHTML (recuperer le contenu d’un div)

 <html>
<head>
</head>
<body>
<div id="div2">Voici le contenu de mon div !!!</div>
<input type="button" value="Récuperer le contenu" onclick="javascript:alert(document.getElementById(‘div2’).innerHTML);" />
</body>
</html>
 
Exemple en action :
 
Voici le contenu de mon div !!!
 

EXEMPLE 4 : getElementById.focus (ajouter le focus dans un champ texte)

<html>
<head>
</head>
<body>
<input type="text" id="input2" />
<input type="button" value="Ajouter le focus" onclick="javascript:document.getElementById(‘input2’).focus();" />
</body>
</html>
 
Exemple en action :
 
 
 
 
 
 

Auteur : Fabien Branchut

Fabien Branchut
Concepteur de site web depuis 2001 : développement web et SEO. Co-fondateur et directeur web de l'agence Studio Vitamine depuis 2008 : conception e-commerce, chef de projet, stratégie SEO. Site de Fabien Branchut.

Commentaires Facebook

1 Commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *