Page dynamique

On sait que le Javascript permet d'ajouter du dynamisme dans la page.

Ainsi, ce dernier doit pouvoir accéder au contenu de la page pour lire, modifier, ajouter ou même supprimer de l'information sur la page.

Trouver une balise dans la page web

L'objet document dans le DOM représente la page affichée dans le navigateur.

À partir de la page, on trouve une balise spécifique grâce à son id.

Exemple:

<p id="slogan">Nous sommes les meilleurs!</p>

let pSlogan = document.getElementById("slogan");
//La variable pSlogan contient maintenant la balise de paragraphe avec tout son contenu

Trouver un champ de formulaire dans un formulaire form

Pour trouver un champ de formulaire :

• Utiliser son id tel que dans l'éexemple précédent
• Utiliser nom attribut name après avoir trouvé le formulaire

Exemple :

<form id="formIdentification">
  <input type="text" name="prenom" placeholder="Veuillez inscrire votre prénom">
  <button type="button" onclick="afficherPrenom()">Afficher</button>
</form>

function afficherPrenom() {
  // Accès au champ via le nom du formulaire et le name du champ
  let formulaire = document.getElementById("formIdentification");
  let valeurPrenom = formulaire.prenom.value;
  alert("Bonjour " + valeurPrenom + " !");
}

Modifier une balise grâce au Javascript

À partir du Javascript, on peut modifier une balise, son contenu, ses classes, ses styles, etc.

Exemple :

<p id="slogan">Nous sommes les meilleurs!</p>

//Modifier le contenu texte du paragraphe
document.getElementById("slogan").innerText = "Ce sont NOUS les meilleurs!";
//Ajouter des classes de style au paragraphe
document.getElementById("slogan").classList.add("lead");
document.getElementById("slogan").classList.add("fg-primary","text-decoration-underline");
//Ajouter du CSS directement sur le paragraphe
document.getElementById("slogan").style.color = "limegreen";

Gestion des classes

Pour ajouter des classes de style, modifier ou retirer des classes de styles sur les balises.

Fonction	Description
element.setAttribute("name", "value")	Permet d'indiquer la valeur pour un attribut de balise.
element.classList.add("name")	Permet d'ajouter une classe à la liste de classes existante.
element.classList.remove("name")	Permet de supprimer une classe à la liste de classes existante.
element.classList.replace("old", "new")	Permet de remplacer une classe old par une autre new.
element.classList.toggle("name")	Permet d'ajouter ou supprimer une classe, selon l'état actuel.