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 valeurPrenom = document.getElementById("formIdentification").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("text-primary","text-decoration-underline");
//Ajouter du CSS directement sur le paragraphe
document.getElementById("slogan").style.fontWeight = "bold";

Ajouter des nouvelles balises dans le HTML

Les pages web sont souvent construites dynamiquement selon les besoins immédiats de l'utilisateur.

Exemples :

• Page de résultats de recherche Google
• Page de produits après application de filtres
• Panier d'achats après ajout de produits

Ces pages ont du contenu dynamique qui est ajouté au besoin.