GetElementById
GetElementById est la fonction la plus imporante du Javascript. C'est grâce à elle que l'on peut modifier des morceaux entiers de texte sans devoir recharger la page.

Comme son nom l'indique, GetElementById sert à récupérer un élément (balise) d'après son...id (qui est unique.
Après avoir "sélectionné" cette balise, on pourra modifier la couleur du contenu, la police, la taille...
Voici la syntaxe de getElementById:

getElementById('id');

Veillez à bien mettre les majuscules à getElementById car javascript est case sensitive (sensible aux majuscules et aux minuscules).

Pour modifier le style d'un élément, on utilisera "style.element". Par exemple, pour modifier la couleur d'un paragraphe, on tapera ceci:

document.getElementById('text').style.color='red';

-Vous ne pouvez modier que des propriétés EXISTANTES.
-document.getElementById doit être mis APRES le paragraphe sur lequel il va travailler.

Comme cette fonction doit tout de même vous paraitre quelque peut abstraite, voici quelques exemples:

<script type="text/javascript">
function change_mots(){
document.getElementById('bouton').value="Au revoir!";
}
</script><input type="button" id="bouton" value="Bonjour!" onClick="change_mots()" />

Regardez le résultat:    
Dans cet exemple, on affiche un bouton dont l'id est "bouton" et qui comporte le texte "Bonjour". Lorsque le visiteur clique dessus (onClick), la fonction "change_mots" est appellée. Celle-ci change la valeur du bouton dont l'id est "bouton" et met comme texte (value) "Au revoir".

Dans le même esprit, on peut compliquer quelque peu ce script comme ceci:

<script type="text/javascript">
function change_mots(id){
if(document.getElementById(id).value == 'Cliquez ici'){
var mots = "Ce bouton est cliqué!";
}
else{
var mots = "Cliquez ici";
}
document.getElementById(id).value=mots;
}
</script><input type="button" id="bouton1" value="Cliquez ici" onClick="change_mots('bouton1')" /><br />
<input type="button" id="bouton2" value="Cliquez ici" onClick="change_mots('bouton2')" /><br />
<input type="button" id="bouton3" value="Cliquez ici" onClick="change_mots('bouton3')" /><br />
<input type="button" id="bouton4" value="Cliquez ici" onClick="change_mots('bouton4')" /><br />
<input type="button" id="bouton5" value="Cliquez ici" onClick="change_mots('bouton5')" /><br />

Ce petit script va récupérer envoyer l'id du bouton cliqué à la fonction "change_mots" qui va vérifier quelle est la valeur du bouton et, suivant cette valeur, changer le texte en "Cliquez ici" ou en "Ce bouton est cliqué!".
Voici le résultat en réel:





innerHTML


innerHTML, couplé à getElementById permet de modifier le contenu d'un paragraphe.
Voici comment l'utiliser:

document.getElementById(id).innerHTML = 'Contenu';

Voici un exemple simplissime:

<script type="text/javascript">
function change_contenu(){
document.getElementById('fruits').innerHTML='J\'aime les poires';
}
</script><p id="fruits">
J'aime les pommes
</p>
<a href="#" onClick="change_contenu()">Changer le texte du paragraphe</a>

Voici le résultat:

J'aime les pommes

Changer le texte du paragraphe

getElementsByTagName


getElementByTagName est une fonction similaire à getElementById sauf que cette fonction ne travaille pas avec l'id mais avec le nom de la balise!

Mais s'il y a plusieurs balises les mêmes (comme 3 <h1>, comment fait-on pour les différencier?

On repère les différentes balises par order d'apparition.
Voici la syntaxe de getElementsByTagName:

document.getElementsByTagName('p')[0].style.color = 'red';

Comme vous pouvez le voir, après le nom de la balise (sans les chevrons) apprait un nombre entre chrochets, comme pour les array, c'est le rang de la balise par ordre d'apparition. Le petit code d'exemple changera donc la couleur du premier paragraphe en rouge.

Compter le nombre de balises
Pour compter le nombre de balises il suffit de rajouter la propriété ".length" à la fin de getElementsByTagName.
Exemple:

var nb_balises = document.getElementsByTagName('p').length;

On peut donc changer tout les styles grâce à une simple boucle:

var nb_balises = document.getElementsByTagName('p').length;
for(i=0; i<=nb_balises; i++){
document.getElementsByTagName('p')[i].style.color='blue';
}

Faites bien attention de placer ce code JS APRES vos diffférents § sinon vous aurez une erreur.

Vous pouvez bien évidamment utiliser la propriété "innerHTML" avec getElementsByTagName.

Précédent       suivant

Creative Commons License
Sauf mention contraire, le contenu de cette page est sous licence Creative Commons
Page générée en 0.3656 secondes.
Retour en haut de la page
Imprimer cette page