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>
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...).
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.
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];
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];
Intégrer du code JavaScript au code fourni pour compter le nombre de paragraphes dans la page précédente et l'afficher:
Utiliser d'abord getElementsByTagName
puis utiliser querySelectorAll pour faire la même chose.
L'objectif pédagogique est d'essayer les deux possibilités.
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>
<!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>
<!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>
Vous allez maintenant compter le nombre de titres:
compter le nombre de titres <h1> dans votre page
modifier votre code javascript pour compter, à l'aide d'une boucle, le nombre de titre h1, h2, h3, h4, h5 et h6
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
<!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>
<!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>
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");
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.
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.
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.
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;
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");
Avec le code fourni, ajouter du JavaScript pour :
Afficher le lien de la première balise <a> dans un alert
Afficher la valeur de incipit, en récupérant le premier titre h2 dans un alert
<!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>
<!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>
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.
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";
Dans le meme exemple que précédement:
let elementAvecLeFondBleu = document.querySelector("#bleu");
elementAvecLeFondBleu.setAttribute("id", "rouge"):
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
Par exemple, pour afficher le texte du premier titre h1 d'une page HTML:
let premierTitre = document.querySelector("h1");
alert(premierTitre.innerHTML);
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é";
Pour cet exemple, tous les paragraphes sont sur fond vert par défaut (class="vert")
Afficher le texte du premier paragraphe dans un alert
Verifier si le texte du paragraphe commence par un "V" majuscule.
Si c'est le cas, faire en sorte que le fond devienne rouge.
Utiliser une boucle pour que tous les paragraphes commençant par un "V" aient un fond rouge.
<!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>
<!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>