Pour continuer l’apprentissage de JavaScript, nous allons voir les interactions entre JavaScript et HTML.
Pour rappel, une page HTML est un document contenant du texte et des balises structurantes. En JavaScript, il est possible de manipuler ce document grace aux interactions entre les fichiers JS et HTML.
Manipulation du document HTML
Depuis le fichier JavaScript, il est possible d’ajouter du texte directement sur la page (document) HTML. Pour cela, on utilisera la propriété .write :
document.write('Text');
document permet de cibler le document (page HTML) dans son ensemble.
Depuis le fichier JS, on peut aussi modifier ou récupérer du texte avec la propriété .innerText :
document.innerText; //permet de récupérer de l'information document.innerText = 'Un texte'; //permet de modifier l'information
Il est aussi possible de manipuler le HTML (et ses balises) avec la propriété .innerHTML. Cela permet de rajouter, en plus du texte, les balises que l’on veut.
Toutes ces manipulations se font directement sur le document.
Il est toutefois possible de modifier uniquement certaines parties de ce document. Pour cela, on va cibler spécifiquement ses éléments.
Ciblage par id
L’id est unique dans une page HTML. Il est donc facile de le cibler pour modifier le contenu de la balise identifiée. Pour cela, on utilisera la propriété getElementById( ) :
<p id="txt"> </p>
document.getElementById('txt').innerText = 'Texte à insérer';
Dans l’exemple ci-dessus, on a ciblé la balise contenant l’id ‘txt’ puis on a ajouté (ou modifié) du texte à l’intérieur.
Lorsque l’on code, il est possible que l’on répète plusieurs fois le même ciblage. Dans ce cas il est possible de créer une variable const. Cela permet de simplifier le code, de le rendre plus lisible. De plus, si l’id change, il sera plus facile de le modifier (on n’aura pas à parcourir toutes les lignes de code pour le changer !) :
const txt = document.getElementById('txt');
Ciblage par class
Le ciblage peut se faire en fonction des class ajoutées aux balises.
<p class="rouge"> </p>
document.getElementsByClassName('rouge');
Dans l’exemple ci-dessus, la class ‘rouge’ a été ciblée.
Attention à l’écriture : il ne faut pas oublier le ‘s’ après ‘Element’. En effet, la console considère le résultat de la recherche par class comme un tableau.
Il faudra aussi bien penser à indiquer l’indice visé entre crochets après le getElementsByClassName( ) .
Ciblage par balise
Le ciblage peut se faire en fonction des balises.
const NumDeux = document.getElementsByTagName('p');
NumDeux[1].innerText = 'Nouveau Texte';
Tout comme pour le ciblage par class, le résultat de la recherche par balise est considérée comme un tableau.
Dans l’exemple ci-dessus, le texte sera donc ajouté au niveau de la 2ème balise <p> du document.
Autres ciblages
Il est possible de cibler plus généralement un élément. On utilisera querySelector :
querySelector('element') // ciblera le 1er élément désigné
querySelectorAll('element') // ciblera tous les éléments désignés (=> tableau)
A noter que l’écriture de l’élément se fait comme sur le fichier CSS.
Ces ciblages sont à utiliser de préférence lorsqu’il n’y a pas la possibilité d’utiliser les autres ciblages.
Modification d’une source
Avec JavaScript, il est possible de modifier la source d’une image, d’un lien, etc.
Pour cela, on va utiliser la propriété .src pour une image, .href pour un lien, etc.
Par exemple, pour modifier la source d’une image :
<img id="IdImg" src=""> <p> Texte </p>
document.getElementById('IdImg').src = 'image.jpg';
Modification du CSS
JavaScript interprète le CSS comme un objet (alors qu’il considère le HTML comme un tableau). Lorsque l’on modifie le CSS en JS, on ne modifie pas le fichier CSS source. On vient juste inscrire les nouvelles règles de style dans le HTML (les modifications seront visibles uniquement depuis l’inspecteur !).
Il faut alors écrire les propriétés CSS en camelCase.
Par exemple :
document.getElementsByClassName('rouge')[1].style.backgroundColor = 'blue';
Il est possible d’écrire plusieurs propriétés CSS (s’il y a de nombreuses modifications, il sera préférable de passer directement par le fichier CSS !) :
document.getElementsByClassName('rouge')[0].style.cssText = 'font-family: Arial, sans-serif ; color: red ;' ;
Voici un récapitulatif des interactions de base qu’il est possible d’avoir entre les fichiers JavaScript et HTML/CSS.
La formation continuera sur des fonctions plus avancées en JavaScript…