Lien JavaScript et HTML

Introduction

Avec JavaScript, vous pouvez:

  • Récupérer des informations sur les balises HTML d'une page web :

    • ex : le nombre de balises paragraphe <p> par exemple

    • ex : les balises avec un certain id, div ou class

  • Récupérer ce qu'il y a entre deux balises :

    • ex : le texte d'un paragraphe entre <p> et </p>

    • ex: le titre entre deux balises de titre <h1> et </h1>

  • Modifier les informations de balises :

    • ex : modifier l'id ou la class d'une balise

  • Modifier ce qu'il y a entre deux balises :

    • ex : modifier le texte d'un paragraphe entre deux balises <p> et </p>

    • ex: modifier le titre entre deux balises de titre <h1> et </h1>


Cours: récupérer toutes balises HTML d'un certain type
TROUVER ET RÉCUPÉRER DES ÉLÉMENTS HTML avec JavaScript
Les balises HTML: récupérer TOUS les éléments d'un type dans un document
document.getElementsByTagName("x" )
document.querySelectorAll("x");
Exercice 1: afficher le nombre de paragraphes dans une page HTML
Exercice 2: afficher le nombre de titres dans une page HTML
Cours: récupérer un seul élément avec balise HTML d'un certain type
Les balises HTML: Récupérer le premier élément d'un type dans un document
Les balises HTML:Récupérer l'élément numéro n d'un type dans un document
Cours: récupérer les balises HTML avec certains id ou class
Dans les balises HTML, id et class : récupérer TOUS les éléments d'une certaine class ou d'un certain id
Cours: lire les attributs des balises HTML (par exemple le lien hypertexte d'une balise <a>)
Dans les balises HTML: lire les attributs
Pour les attributs natifs en HTML : unSeulElement.nomDeLAttributNatif
Pour tous les attributs, natifs ou non : unSeulElement.getAttribute("nomDeLAttribut")
Exercice 3: récupérer et afficher les attributs dans les balises HTML
Cours: modifier le HTML (par exemple le lien hypertexte d'une balise <a> ou le texte d'un titre <h2>)
Modifier la valeur des attributs HTML:
Pour les attributs natifs, comme id par exemple, on ajoute un "." suivi du nom de l'attribut :
On peut également utiliser, pour tous les attributs natifs ou non, setAttribute("nomDeLattribut", "nouvelleValeur"):
Récupérer et modifier le texte entre deux balises
Récuperer le texte entre deux balises
Modifier le texte entre deux balises
Exercice 4
Correction: Code complet (HTML&JavaScript) Exercice 4

Cours: récupérer toutes balises HTML d'un certain type

TROUVER ET RÉCUPÉRER DES ÉLÉMENTS HTML avec JavaScript

En javascript, on peut récuper la collection de tous les éléments avec une certaine caractéristique HTML. On vera dans cette partie comment récupérer toutes les balises d'un certain type, la première balise d'un type, ou toutes les balises avec certaines caractéristiques (class, id, div...).

Les balises HTML: récupérer TOUS les éléments d'un type dans un document

On peut récupérer l'ensemble des balises d'un type donné dans une même page HTML.

Voici comment le faire en utilisant l'instruction spécifique (en replaceant x par le nom de la balise): document.getElementsByTagName("x");

Et comment le faire en utilisant l'instruction générique (en replaceant x par le nom de la balise): document.querySelectorAll("x");


Cela permet de récupérer une collection (un ensemble) de tous les éléments de ce type dans le document HTML. Si la collection en question s'appelle maCollection, maCollection[0] est le premier élément, maCollection[1] est le deuxième élément, maCollection[2] est le troisième.

Vous avez peut-être remarqué que l'on peut donc accéder aux éléments d'une collection comme pour les caractères d'une chaines de caractères (String) avec [0] pour la première lettre, [1] pour la deuxième etc.

document.getElementsByTagName("x" )

Cela fonctionne avec tous les noms de balises HTML. Voici quelques exemples.

Pour les balises paragraphes <p>:

var tousLesParagraphes = document.getElementsByTagName("p");

var premierParagraphe = tousLesParagraphes[0];

var quatriemeParagraphe = tousLesParagraphes[3];


Pour les balises titre <h1>:

var tousLesH1 = document.getElementsByTagName("h1");

var premierH1 = tousLesH1[0];

var quatriemeH1 = tousLesH1[3];


Pour les balises titre <h2>:

var tousLesH2 = document.getElementsByTagName("h2");

var premierH2 = tousLesH1[0];

var quatriemeH2 = tousLesH2[3];


Pour les balises du texte en gras <strong>:

var textesEnGras= document.getElementsByTagName("strong");

var premierTextGras = textesEnGras[0];

var quatriemeTextGras = textesEnGras[3];

document.querySelectorAll("x");

Cela fonctionne avec tous les noms de balises HTML. Voici quelques exemples.

Pour les balises paragraphes <p>:

var tousLesParagraphes = document.querySelectorAll("p");

var premierParagraphe = tousLesParagraphes[0];

var quatriemeParagraphe = tousLesParagraphes[3];


Pour les balises titre <h1>:

var tousLesH1 = document.querySelectorAll("h1");

var premierH1 = tousLesH1[0];

var quatriemeH1 = tousLesH1[3];



Pour les balises titre <h2>:

var tousLesH2 = document.querySelectorAll("h2");

var premierH2 = tousLesH1[0];

var quatriemeH2 = tousLesH2[3];


Pour les balises du texte en gras <strong>:

var textesEnGras= document.querySelectorAll("strong");

var premierTextGras = textesEnGras[0];

var quatriemeTextGras = textesEnGras[3];

Exercice 1: afficher le nombre de paragraphes dans une page HTML

Exercice 1

Intégrer du code JavaScript au code fourni pour compter le nombre de paragraphes dans la page précédente et l'afficher:

  1. Utiliser d'abord getElementsByTagName

  2. puis utiliser querySelectorAll pour faire la même chose.

L'objectif pédagogique est d'essayer les deux possibilités.

Indices Exercice 1

Correction Exercice 1

Pour vérifier que vous avez bien réaliser l'exercice:

  • Verifier que vous trouvez bien 7 paragraphes

  • Ajouter ou enlever des paragraphes et verifier que le résultat est correct

  • Note: si le résultat est 0, essayer de mettre le code javascript après la balise </body>

Code

<!DOCTYPE html>

<html>

<body>

<h1> Ceci est le site d'une histoire dont vous êtes le héros !</h1>

<h2> Incipit</h2>

<p> Vous entrez dans une maison qui parait hantée... </p>

<p> La porte grince, vous passez le pas de la porte, et elle se referme d'elle même derrière vous. </p>

<p> Vous entrez dans une maison qui parait hantée... </p>

<h2> L'heure du choix </h2>

<p> Vous sursautez... C'est votre téléphone qui sonne dans votre poche !</p>

<p> <strong> Que choissiez-vous ? </strong> </p>

<p> Choix A: vous répondez et essayez de sortir immédiatement. </p>

<p> Choix B: vous ignorez l'appel: vous êtes là pour faire de l'urbex avant tout! </p>


</body>

</html>



Correction: Code complet (HTML&JavaScript) Exercice 1

<!DOCTYPE html>

<html>

<body>

<h1> Ceci est le site d'une histoire dont vous êtes le héros !</h1>

<h2> Incipit</h2>

<p> Vous entrez dans une maison qui parait hantée... </p>

<p> La porte grince, vous passez le pas de la porte, et elle se referme d'elle même derrière vous. </p>

<p> Vous entrez dans une maison qui parait hantée... </p>

<h2> L'heure du choix </h2>

<p> Vous sursautez... C'est votre téléphone qui sonne dans votre poche !</p>

<p> <strong> Que choissiez-vous ? </strong> </p>

<p> Choix A: vous répondez et essayez de sortir immédiatement. </p>

<p> Choix B: vous ignorez l'appel: vous êtes là pour faire de l'urbex avant tout! </p>


</body>

<script>

let maCollectionDeParagraphes1 = document.getElementsByTagName("p");

alert("1.Il y a "+ maCollectionDeParagraphes1.length + " paragraphes dans cette page");

</script>


<script>

let maCollectionDeParagraphes2 = document.querySelectorAll("p");

alert("2. Il y a "+ maCollectionDeParagraphes2.length + " paragraphes dans cette page");

</script>

</html>

Exercice 2: afficher le nombre de titres dans une page HTML

Exercice 2

Vous allez maintenant compter le nombre de titres:

  1. compter le nombre de titres <h1> dans votre page

  2. modifier votre code javascript pour compter, à l'aide d'une boucle, le nombre de titre h1, h2, h3, h4, h5 et h6

Indices Exercice 2

Correction Exercice 2

Pour vérifier que vous avez bien réaliser l'exercice:

  • Verifier que vous trouvez bien un h1, deux h2, zéro pour les autres

  • Ajouter ou enlever des titres et verifier que le résultat est correct

Code

<!DOCTYPE html>

<html>

<body>

<h1> Ceci est le site d'une histoire dont vous êtes le héros !</h1>

<h2> Incipit</h2>

<p> Vous entrez dans une maison qui parait hantée... </p>

<p> La porte grince, vous passez le pas de la porte, et elle se referme d'elle même derrière vous. </p>

<p> Vous entrez dans une maison qui parait hantée... </p>

<h2> L'heure du choix </h2>

<p> Vous sursautez... C'est votre téléphone qui sonne dans votre poche !</p>

<p> <strong> Que choissiez-vous ? </strong> </p>

<p> Choix A: vous répondez et essayez de sortir immédiatement. </p>

<p> Choix B: vous ignorez l'appel: vous êtes là pour faire de l'urbex avant tout! </p>


</body>

</html>



Correction: Code complet (HTML&JavaScript) Exercice 2

<!DOCTYPE html>

<html>

<body>

<h1> Ceci est le site d'une histoire dont vous êtes le héros !</h1>

<h2> Incipit</h2>

<p> Vous entrez dans une maison qui parait hantée... </p>

<p> La porte grince, vous passez le pas de la porte, et elle se referme d'elle même derrière vous. </p>

<p> Vous entrez dans une maison qui parait hantée... </p>

<h2> L'heure du choix </h2>

<p> Vous sursautez... C'est votre téléphone qui sonne dans votre poche !</p>

<p> <strong> Que choissiez-vous ? </strong> </p>

<p> Choix A: vous répondez et essayez de sortir immédiatement. </p>

<p> Choix B: vous ignorez l'appel: vous êtes là pour faire de l'urbex avant tout! </p>


</body>

<script>

let nombreDeUnASix=1;

while(nombreDeUnASix<=6)

{

let leNomDuTitre="h"+ nombreDeUnASix ;

alert( "Nombre de titre" + leNomDuTitre + ": "+ document.getElementsByTagName(leNomDuTitre).length);

nombreDeUnASix++;

}

</script>

</html>

Cours: récupérer un seul élément avec balise HTML d'un certain type


Les balises HTML: Récupérer le premier élément d'un type dans un document

On peut récupérer le premier élément avec une balise d'un type donné dans une page HTML.


En utilisant l'instruction spécifique vue précédemment, qui renvoie une collection, on utilise [0] pour récupérer le premier élément:

  • listeComplete[0];

où l'on a définit listeComplete comme ceci :

  • var listeComplete = document.getElementsByTagName("x");


On peut le faire de la même manière en utilisant l'instruction générique querySelectorAll qui renvoie elle aussi une collection:

  • listeComplete[0];

où l'on a définit listeComplete comme ceci :

  • var listeComplete = document.querySelectorAll("x");


On peut également récupérer directement récupérer me premier élément en utilisant l'instruction générique querySelector au lieu de querySelectorAll :

  • document.querySelector("x");



Les balises HTML:Récupérer l'élément numéro n d'un type dans un document

On peut récupérer n'importe quel élément d'une collection directement grâce à son indice, disons l'indice numéro n.

En utilisant l'instruction spécifique vue précédemment, qui renvoie une collection des éléments avec une certaine balise , on utilise [n] si n est son indice.

Pour l'élément à l'indice 0, on utilise:

  • listeComplete[0]; (s'il existe)


Pour l'élément à l'indice 1, on utilise:

  • listeComplete[1]; (s'il existe)


Pour l'élément à l'indice 59, on utilise:

  • listeComplete[59]; (s'il existe)


Si on a définit listeComplete comme ceci :

  • var listeComplete = document.getElementsByTagName("x");

où on remplace "x" par le nom de la balise HTML. On utilisera "p" pour la balise paragraphe <p> , "body" pour la balise corps du document <body>, "h1" pour la balise des titres de premier niveau <h1>, etc.


L'indice 0 correspond au premier élément, c'est pour cela que listeComplete[0]; permet de récupérer le premier élément

L'indice 1 correspond au deuxième élément, l'indice 2 correspond au troisième élément, et ainsi de suite.

L'indice length-1 correspond au dernier élément, c'est pour cela que listeComplete[listeComplete.length-1]; permet de récupérer le dernier élément.


Cours: récupérer les balises HTML avec certains id ou class


Dans les balises HTML, id et class : récupérer TOUS les éléments d'une certaine class ou d'un certain id

On peut récupérer l'ensemble des éléments d'une page html ayant un id ou une classe donnée utilisée dans le CSS

Pour l'id, voici comment le faire en utilisant l'instruction spécifique (en replaceant x le paramètre de l'id, par exemple id="x"). Pour rappel, il n'y a qu'un seul élément avec un id, ce ne sera donc pas une collection:

  • document.getElementById("x");


On peut également utiliser:

  • document.querySelector("#x");

Le "#" de "#x" permet de faire référence spécifiquement à un id.


Pour la classe, voici comment le faire en utilisant l'instruction spécifique (en replaceant x le paramètre de la classe, par exemple class="x"). Pour rappel, il peut y avoir plusieurs éléments avec une même classe, ce sera donc une collection:

  • document.getElementsByClassName("ma_classe")


On peut également utiliser:

  • document.querySelectorAll(".x");

Le "." de ".x" permet de faire référence spécifiquement à une class.


Cours: lire les attributs des balises HTML (par exemple le lien hypertexte d'une balise <a>)


Dans les balises HTML: lire les attributs

On peut récupérer les attributs d'un élément d'une balise grâce à du JavaScript.

On distingue deux cas:

  • soit on récupère des attributs qui sont natifs en HTML (par exemple, la hauteur d'une image d"une balise <img> ou le href d'un lien d'une balise <a> )

  • soit un récupère n'importe quel attribut, y compris ceux qui ne sont pas natifs en HTML (par exemple, pour une balise paragraphe <p attributImprovise="valeurElleAussiImprovisee">, l'attribut attibutImprovise n'est pas natif HTML)


Attention: pour lire un attribut, il faut d'abord récupérer UN SEUL élément (mais pas une collection, ni une collection d'un seul élément), cf la section "récuperer le PREMIER élément". Ensuite seulement, vous pouvez utiliser les mécanismes ci-après, en partant du principe de l'on a récupéré un élément dans une variable.


Pour les attributs natifs en HTML : unSeulElement.nomDeLAttributNatif

Cela fonctionne avec tous les attributs qui existent de manière native dans les balises HTML. Pour une liste des attributs et les balises associées, vous pouvez consulter la page suivante: https://developer.mozilla.org/fr/docs/Web/HTML/Attributs. Voici quelques exemples.

Pour le lien href des balises lien <a>:

var premierLien = document.getElementsByTagName("a")[0];

var lienHrefDuPremierLien = premierLien.href;


Pour la source src dans les balises <img>, <script>, <video>:

var premierElement = document.getElementsByTagName("x")[0];//où x vaut img script ou video

var laSourceDuPremierElement = premierElement.src;


Pour le type type dans les balises <button>, <input>, <menu>:

var premierElement = document.getElementsByTagName("button-imput-ou-menu")[0];

var leTypeDuPremierElement = premierElement.type;


Pour la hauteur height et la largeur width dans les balises <img>:

var premiereImage = document.getElementsByTagName("img")[0];

var largeur = premiereImage.width;

var hauteur = premiereImage.height;


Pour tous les attributs, natifs ou non : unSeulElement.getAttribute("nomDeLAttribut")


Cela fonctionne avec tous les attributs dans des balises HTML. Voici quelques exemples.


Pour le lien href des balises lien <a>:

var premierLien = document.getAttribute("a")[0];

var lienHrefDuPremierLien = premierLien.getAttribute("href");


Pour la source src dans les balises <img>, <script>, <video>:

var premierElement =document.getElementsByTagName("x")[0];//où x vaut img script ou video

var laSourceDuPremierElement = premierElement.getAttribute("src");


Pour le type type dans les balises <button>, <input>, <menu>:

var premierElement = document.getElementsByTagName("button-imput-ou-menu")[0];

var leTypeDuPremierElement = premierElement.getAttribute("type");


Pour la hauteur height et la largeur width dans les balises <img>:

var premiereImage = document.getElementsByTagName("img")[0];

var largeur = premiereImage.getAttribute("width");

var hauteur = premiereImage.getAttribute("height);


Imaginons la balise <a monAttributPerso="monChoix" href="google.com"> :

var premierLien = document.getElementsByTagName("a")[0];

var laValeurDeMonAttributPersoCestADireMonChoix = premierLien.getAttribute("monAttributPerso");

Exercice 3: récupérer et afficher les attributs dans les balises HTML

Exercice 3

Avec le code fourni, ajouter du JavaScript pour :

  1. Afficher le lien de la première balise <a> dans un alert

  2. Afficher la valeur de incipit, en récupérant le premier titre h2 dans un alert

Indices Exercice 3

Correction Exercice 3

Code

<!DOCTYPE html>

<html>

<body>

<h1> Ceci est le site d'une histoire dont vous êtes le héros !</h1>

<h2 incipit="histoireDontVousEtesLeHeros"> Incipit</h2>

<p> Vous entrez dans une maison qui parait <a href="https://www.youtube.com/watch?v=c78g_12pc9s" > hantée... </a> </p>

<p> La porte grince, vous passez le pas de la porte, et elle se referme d'elle même derrière vous. </p>

<p> Vous entrez dans une maison qui parait hantée... </p>

<h2> L'heure du choix </h2>

<p> Vous sursautez... C'est votre téléphone qui sonne dans votre poche !</p>

<p> <strong> Que choissiez-vous ? </strong> </p>

<p> Choix A: vous répondez et essayez de sortir immédiatement. </p>

<p> Choix B: vous ignorez l'appel: vous êtes là pour faire de l'urbex avant tout! </p>


</body>

</html>



Correction: Code complet (HTML&JavaScript) Exercice 3

<!DOCTYPE html>


<html>

<body>

<h1> Ceci est le site d'une histoire dont vous êtes le héros !</h1>

<h2 incipit="histoireDontVousEtesLeHeros"> Incipit</h2>

<p> Vous entrez dans une maison qui parait <a href="https://www.youtube.com/watch?v=c78g_12pc9s" > hantée... </a> </p>

<p> La porte grince, vous passez le pas de la porte, et elle se referme d'elle même derrière vous. </p>

<p> Vous entrez dans une maison qui parait hantée... </p>

<h2> L'heure du choix </h2>

<p> Vous sursautez... C'est votre téléphone qui sonne dans votre poche !</p>

<p> <strong> Que choissiez-vous ? </strong> </p>

<p> Choix A: vous répondez et essayez de sortir immédiatement. </p>

<p> Choix B: vous ignorez l'appel: vous êtes là pour faire de l'urbex avant tout! </p>


</body>

<script>

alert("Le premier lien est "+ document.querySelector("a").href);

alert("L'attribut incipit vaut "+ document.querySelector("h2").getAttribute("incipit"));

</script>

</html>

Cours: modifier le HTML (par exemple le lien hypertexte d'une balise <a> ou le texte d'un titre <h2>)


Modifier la valeur des attributs HTML:

En javascript, on peut modifier des attributs HTML.

Comme pour la lecture des attributs, l'écriture d'attribut peut se faire de manière différente s'il s'agit d'un attribut natif en HTML ou de n'importe quel attribut natif ou non.


Pour les attributs natifs, comme id par exemple, on ajoute un "." suivi du nom de l'attribut :

Par exemple, imaginons qu'un document CSS permet de mettre un fond bleu à un élément qui a un id="bleu" dans le htm, et en rouge si id="rouge". On peut imaginer demander à un utilisateur s'il veut garder cet élément en bleu (par défaut) ou le changer en rouge.

Pour cela, on va récupérer le id qui est bleu, et le changer en rouge:

let elementAvecLeFondBleu = document.querySelector("#bleu");

elementAvecLeFondBleu.id="rouge";


On peut également utiliser, pour tous les attributs natifs ou non, setAttribute("nomDeLattribut", "nouvelleValeur"):

Dans le meme exemple que précédement:

let elementAvecLeFondBleu = document.querySelector("#bleu");

elementAvecLeFondBleu.setAttribute("id", "rouge"):

Récupérer et modifier le texte entre deux balises

Une fois un élémént récupéré avec querySelector par exemple, on récupère une balise et on peut récupérer le texte entre les deux balises et le modifie avec innerHTML


Récuperer le texte entre deux balises

Par exemple, pour afficher le texte du premier titre h1 d'une page HTML:

let premierTitre = document.querySelector("h1");

alert(premierTitre.innerHTML);


Modifier le texte entre deux balises

Par exemple, pour changer le texte du premier titre h1 d'une page HTML:

let premierTitre = document.querySelector("h1");

premierTitre.innerHTML="Ce Titre est changé";


Exercice 4

Pour cet exemple, tous les paragraphes sont sur fond vert par défaut (class="vert")

  1. Afficher le texte du premier paragraphe dans un alert

  2. Verifier si le texte du paragraphe commence par un "V" majuscule.

  3. Si c'est le cas, faire en sorte que le fond devienne rouge.

  4. Utiliser une boucle pour que tous les paragraphes commençant par un "V" aient un fond rouge.

Indices Exercice 4

Code

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

.vert { background-color: green; }

.rouge { background-color: red; }

</style>

</head>

<body>

<h1> Ceci est le site d'une histoire dont vous êtes le héros !</h1>

<h2> Incipit</h2>

<p class="vert" > Vous entrez dans une maison qui parait hantée... </p>

<p classe=vert> La porte grince, vous passez le pas de la porte, et elle se referme d'elle même derrière vous. </p>

<p class="vert"> Vous entrez dans une maison qui parait hantée... </p>

<h2> L'heure du choix </h2>

<p class="vert"> Vous sursautez... C'est votre téléphone qui sonne dans votre poche !</p>

<p class="vert"> <strong> Que choissiez-vous ? </strong> </p>

<p class="vert"> Choix A: vous répondez et essayez de sortir immédiatement. </p>

<p class="vert"> Choix B: vous ignorez l'appel: vous êtes là pour faire de l'urbex avant tout! </p>


</body>

</html>





Correction: Code complet (HTML&JavaScript) Exercice 4

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

.vert { background-color: green; }

.rouge { background-color: red; }

</style>

</head>

<body>

<h1> Ceci est le site d'une histoire dont vous êtes le héros !</h1>

<h2> Incipit</h2>

<p class="vert" > Vous entrez dans une maison qui parait hantée... </p>

<p classe=vert> La porte grince, vous passez le pas de la porte, et elle se referme d'elle même derrière vous. </p>

<p class="vert"> Vous entrez dans une maison qui parait hantée... </p>

<h2> L'heure du choix </h2>

<p class="vert"> Vous sursautez... C'est votre téléphone qui sonne dans votre poche !</p>

<p class="vert"> <strong> Que choissiez-vous ? </strong> </p>

<p class="vert"> Choix A: vous répondez et essayez de sortir immédiatement. </p>

<p class="vert"> Choix B: vous ignorez l'appel: vous êtes là pour faire de l'urbex avant tout! </p>


</body>


<script>

let premierParagraphe = document.querySelectorAll("p");

alert("Premier paragraphe: " + premierParagraphe);

if(premierParagraphe[0]=="V")

{

setAttribute("id", "rouge"):

}


</script>

</html>