1.le DOM Introduction une page web est un document contenant du texte ainsi que des balises qui permettent de structurer ce document, en décrivant des éléments comme des titres, des paragraphes, des liens, etc. Le langage de description d'une page web est le HTML. Pour obtenir le résultat final, le navigateur parcourt le code HTML de la page afin de construire une représentation de sa structure. Ensuite, il utilise cette représentation pour afficher les différents éléments de la page. Le navigateur permet d'accéder programmatiquement à la structure de la page qu'il affiche. En écrivant du code javascript, on peut ainsi modifier dynamiquement la page web : ajouter ou retirer des éléments, changer leur style, etc. Tout ou presque devient possible ! Cette représentation de la structure d'une page web offerte par un navigateur et exploitable via JavaScript est appelée DOM, pour Document Object Model. Le DOM définit la structure d'une page et le moyen d'interagir avec elle
1.le DOM Introduction Au tout début du Web, chaque navigateur utilisait son propre DOM, incompatible avec ceux des concurrents. Imaginez le calvaire des premiers développeurs JavaScript pour écrire du code pouvant fonctionner partout ! Heureusement pour vous, cette période est révolue : le World Wide Web Consortium (W3C) a standardisé les choses et la première version d'un DOM unifié a vu le jour en 1998. À l'heure actuelle, tous les navigateurs récents utilisent un DOM standard.
Les éléments sont visibles dans l'inspecteur 1.le DOM La structure d'une page web Chaque entité de l'arborescence est appelée un nœud (node). On distingue deux types de nœuds : Ceux (en bleu) qui correspondent à des éléments HTML, comme <body> ou<p>. Ces nœuds peuvent avoir des sous-nœuds, appelés fils ou enfants(children). Ceux (en rouge) qui correspondent au contenu textuel de la page. Ces nœuds ne peuvent pas avoir de fils. Les éléments sont visibles dans l'inspecteur
Premiers pas avec le DOM en JavaScript Le DOM représente une page web sous la forme d'une hiérarchie d'objets, où chaque objet correspond à un nœud de l'arborescence de la page. Les objets du DOM disposent de propriétés et de méthodes permettant de les manipuler avec JavaScript. Accéder au DOM avec la variable document La variable document correspond à l'élément<html> Découvrir le type d'un nœud var h = document.head; // La variable h contient l'objet head du DOM console.log(h); var b = document.body; // La variable b contient l'objet body du DOM console.log(b); if (document.body.nodeType === document.ELEMENT_NODE) { console.log("Body est un noeud élément"); } else { console.log("Body est un noeud textuel"); }
Premiers pas avec le DOM en JavaScript. Accéder aux enfants d'un nœud élément Chaque objet du DOM de type élément possède une propriété childNodes. Il s'agit d'une collection ordonnée regroupant tous ses nœuds enfants sous la forme d'objets DOM. On peut utiliser cette collection un peu comme un tableau pour accéder aux différents enfants d'un nœud. // Accès au premier enfant du noeud body console.log(document.body.childNodes[0]); // Accès au 2eme enfant du noeud body console.log(document.body.childNodes[1]);
Premiers pas avec le DOM en JavaScript. Parcourir la liste des nœuds enfants Accéder au parent d'un nœud Chaque objet du DOM possède une propriété parentNode qui renvoie son nœud parent sous la forme d'un objet DOM. // Affiche les noeuds enfant du noeud body for (var i = 0; i < document.body.childNodes.length; i++) { console.log(document.body.childNodes[i]); } var h1 = document.body.childNodes[1]; console.log(h1.parentNode); // Affiche le noeud body console.log(document.parentNode); // Affiche null : document n'a aucun noeud parent
Premiers pas avec le DOM en JavaScript. TP : Affichage d'un nœud enfant Ecrire une fonction qui affiche un nœud enfant d'un objet du DOM. La fonction reçoit en paramètre l'objet du DOM et l'indice du nœud enfant qu'elle doit afficher. Les cas d'erreur (indice ou type de nœud incorrect) doivent être gérés.
Parcourez le DOM 1.le DOM Récupérer le fichier merveille.html Les limites du parcours du DOM nœud par nœud Imaginons qu'on souhaite sélectionner le titre "Merveilles du monde antique" de notre page web d'exemple. En prenant en compte les nœuds textuels vides associés aux espaces et aux retours à la ligne, il s'agit du deuxième nœud enfant du sixième nœud enfant du nœud body. On pourrait donc l'afficher en écrivant le code ci-dessous. Cette technique fonctionne, mais montre vite ses limites. Le code de sélection devient difficile à lire lorsque la structure de la page se complexifie. De plus, il risque de devenir erroné en cas de modification ultérieure de la structure. console.log(document.body.childNodes[5].childNodes[1]);
Parcourez le DOM 1.le DOM Sélection d'éléments selon leur balise Tous les éléments du DOM possèdent une méthode getElementsByTagName. Celle-ci renvoie une liste des éléments qui portent le nom de la balise qui a été passée en paramètre lors de l'appel. La recherche s'effectue sur l'ensemble des sous-éléments du nœud sur lequel la méthode est appelée, et pas seulement ses enfants directs. Avec cette méthode, la sélection du premier titre h2 de notre page d'exemple devient plus facile ! var titresElts = document.getElementsByTagName("h2"); // Tous les titres h2 console.log(titresElts[0]); // Affiche le premier titre h2 console.log(titresElts.length); // Affiche 3
Parcourez le DOM 1.le DOM Sélection d'éléments selon leur classe Les éléments du DOM disposent également d'une méthode getElementsByClassName. Elle renvoie une liste des éléments ayant le nom de classe passé en paramètre Pour sélectionner et afficher l'ensemble des éléments du document ayant pour classe "merveilles", vous pouvez écrire le code ci-dessous On obtient l'affichage des deux listes (balises <ul>) attendues, mais pas de la troisième qui ne possède pas la classe "merveilles".. // Tous les éléments ayant la classe "merveilles" var merveillesElts = document.getElementsByClassName("merveilles"); for (var i = 0; i < merveillesElts.length; i++) { console.log(merveillesElts[i]); }
Parcourez le DOM 1.le DOM Sélection d'un élément selon son identifiant Enfin, chaque élément du DOM propose une méthode getElementById qui renvoie parmi tous ses sous-éléments celui possédant l'identifiant passé en paramètre. Le code ci-dessous permet de sélectionner et d'afficher la liste portant l'identifiant "nouvelles". On obtient l'affichage des deux listes (balises <ul>) attendues, mais pas de la troisième qui ne possède pas la classe "merveilles".. // Elément portant l'identifiant "nouvelles" console.log(document.getElementById("nouvelles"));
1.le DOM Parcourez le DOM Sélection d'éléments à partir d'un sélecteur CSS On souhaite obtenir toutes les éléments <li> correspondant à des merveilles antiques qui existent toujours. Elles sont identifiées par la classe "existe" dans la page web. cependant, cette syntaxe est un peu lourde et sujette aux erreurs. console.log(document.getElementById("antiques").getElementsByClassName("existe").length); // Affiche 1 console.log(document.getElementById("antiques").getElementsByClassName("existe").length); // Affiche 1
1.le DOM Parcourez le DOM Sélection d'éléments à partir d'un sélecteur CSS Pour faciliter la sélection d'éléments suivant des critères complexes, on peut utiliser querySelectorAll permet de rechercher des éléments à partir d'un sélecteur CSS. // Tous les paragraphes console.log(document.querySelectorAll("p").length); // Affiche 3 // Tous les paragraphes à l'intérieur de l'élément identifié par "contenu" console.log(document.querySelectorAll("#contenu p").length); // Affiche 2 // Tous les éléments ayant la classe "existe" console.log(document.querySelectorAll(".existe").length); // Affiche 8
1.le DOM Parcourez le DOM Sélection d'éléments à partir d'un sélecteur CSS Voici comment on peut utiliser querySelectorAll pour sélectionner les merveilles antiques qui existent toujours. querySelector. fonctionne de manière identique à querySelectorAll, mais renvoie uniquement le premier élément correspondant au sélecteur passé en paramètre. // Tous les éléments fils de l'élément identifié par "antiques" ayant la classe "existe" console.log(document.querySelectorAll("#antiques > .existe").length); // Affiche 1 // Le premier paragraphe console.log(document.querySelector("p"));
Parcourez le DOM 1.le DOM Le contenu HTML La propriété innerHTML permet de récupérer tout le contenu HTML d'un élément du DOM. Le contenu textuel La propriété textContent renvoie tout le contenu textuel d'un élément du DOM, sans l'éventuel balisage HTML. // Le contenu HTML de l'élément identifié par "contenu" console.log(document.getElementById("contenu").innerHTML); // Le contenu textuel de l'élément identifié par "contenu" console.log(document.getElementById("contenu").textContent);
Parcourez le DOM 1.le DOM Les attributs La méthode getAttribute peut être appliquée à un élément du DOM et renvoie la valeur de l'attribut passé en paramètre. Certains attributs sont directement accessibles sous la forme de propriétés. C'est notamment le cas pour les attributs id, href et value. // L'attribut href du premier lien console.log(document.querySelector("a").getAttribute("href")); // L'identifiant de la première liste console.log(document.querySelector("ul").id); // L'attribut href du premier lien console.log(document.querySelector("a").href);
Parcourez le DOM 1.le DOM Les attributs On peut vérifier la présence d'un attribut sur un élément grâce à la méthode hasAttribute, comme dans l'exemple ci-après if (document.querySelector("a").hasAttribute("target")) { console.log("Le premier lien possède l'attribut target"); } else { console.log("Le premier lien ne possède pas l'attribut target"); }
Parcourez le DOM 1.le DOM Les classes Dans une page web, une balise peut posséder plusieurs classes. La propriéte classList permet de récupérer la liste des classes d'un élément du DOM. Elle s'utilise comme un tableau. // Liste des classes de l'élément identifié par "antiques" var classes = document.getElementById("antiques").classList; console.log(classes.length); // Affiche 1 : l'élément possède une seule classe console.log(classes[0]); // Affiche "merveilles" // Liste des classes de l'élément identifié par "antiques" var classes = document.getElementById("antiques").classList; console.log(classes.length); // Affiche 1 : l'élément possède une seule classe console.log(classes[0]); // Affiche "merveilles" // Liste des classes de l'élément identifié par "antiques" var classes = document.getElementById("antiques").classList; console.log(classes.length); // Affiche 1 : l'élément possède une seule classe console.log(classes[0]); // Affiche "merveilles"
Parcourez le DOM 1.le DOM Les classes possibilité de tester la présence d'une classe dans un élément en appelant la méthode contains sur la liste des classes. if (document.getElementById("antiques").classList.contains("merveille")) { console.log("L'élément identifié par antiques possède la classe merveille"); } else { console.log("L'élément identifié par antiques ne possède pas la classe merveille"); }
Parcourez le DOM 1.le DOM TP reves.html TP instruments.html Créez ensuite le fichier js/instruments.js. Dans ce fichier, créez une fonction infosLiens qui doit afficher : le nombre total de liens dans la page web ; la cible du premier et du dernier lien. // TODO : écrire la fonction compterElements console.log(compterElements("p")); // Doit afficher 4 console.log(compterElements(".adjectif")); // Doit afficher 3 console.log(compterElements("p .adjectif")); // Doit afficher 3 console.log(compterElements("p > .adjectif")); // Doit afficher 2
Modifier un élément existant (page exemple : langages.html) 2.Modifiez la structure de la page Modifier un élément existant (page exemple : langages.html) Les propriétés étudiées au chapitre précédent pour obtenir des informations sur un élément de la page permettent également de mettre à jour ces informations. Le contenu HTML La propriété innerHTML peut être utilisée pour modifier le contenu HTML d'un élément du DOM. Par exemple, on peut ajouter un nouveau langage à notre liste grâce au code ci-dessous. On accède à la balise <ul> identifiée par "langages", puis on lui ajoute (opérateur += ) une entrée sous la forme d'une balise <li>. // Modification du contenu HTML de la liste : ajout d'un langage document.getElementById("langages").innerHTML += '<li id="c">C</li>';
Modifier un élément existant (page exemple : langages.html) 2.Modifiez la structure de la page Modifier un élément existant (page exemple : langages.html) Le contenu textuel La propriété textContent permet de modifier le contenu textuel d'un élément du DOM. Voici par exemple comment compléter le titre affiché par notre page. Les attributs La méthode setAttribute permet de définir la valeur de l'un des attributs d'un élément. Elle prend en paramètres le nom et la valeur de cet attribut. OU // Modification du contenu textuel du premier titre document.querySelector("h1").textContent += " de programmation"; // Définition de l'attribut "id" du premier titre document.querySelector("h1").setAttribute("id", "titre"); // Définition de l'attribut "id" du premier titre document.querySelector("h1").setAttribute("id", "titre"); document.querySelector("h1").id = "titre";
Modifier un élément existant (page exemple : langages.html) 2.Modifiez la structure de la page Modifier un élément existant (page exemple : langages.html) Les classes On peut utiliser la propriété classList pour ajouter ou supprimer des classes à un élément du DOM. Pour cela, on emploie les méthodes add (ajout) et remove (suppression), comme dans l'exemple suivant. var titreElt = document.querySelector("h1"); // Accès au premier titre h1 titreElt.classList.remove("debut"); // Suppression de la classe "debut" titreElt.classList.add("titre"); // Ajout de la classe "titre" console.log(titreElt);
Ajouter un nouvel élément 2.Modifiez la structure de la page Ajouter un nouvel élément L'ajout d'un nouvel élément à une page web peut se décomposer en trois opérations : - Création du nouvel élément. - Définition des informations de l'élément. - Insertion du nouvel élément dans le DOM. Par exemple, imaginons que l'on souhaite ajouter le langage "Python" à la liste des langages de notre page. Voici le code JavaScript qui permet d'obtenir ce résultat. var pythonElt = document.createElement("li"); // Création d'un élément li pythonElt.id = "python"; // Définition de son identifiant pythonElt.textContent = "Python"; // Définition de son contenu textuel document.getElementById("langages").appendChild(pythonElt); // Insertion du nouvel élément
Ajouter un nouvel élément 2.Modifiez la structure de la page Ajouter un nouvel élément Décomposons cet exemple afin de mieux le comprendre. Création de l'élément La création d'un élément s'effectue grâce à une méthode nommée createElement .Elle s'utilise sur l'objet document et prend en paramètre le nom de balise du nouvel élément. Elle renvoie l'élément créé sous la forme d'un objet, stocké ici dans la variable nommée pythonElt pour pouvoir être modifié puis inséré dans le DOM. var pythonElt = document.createElement("li"); // Création d'un élément li
Ajouter un nouvel élément 2.Modifiez la structure de la page Ajouter un nouvel élément Décomposons cet exemple afin de mieux le comprendre. Définition des informations de l'élément Une fois l'élément créé et stocké dans une variable, on définit ses informations (contenu, identifiant, classe, etc) en utilisant les propriétés présentées plus haut. Ici, l'élément créé a pour identifiant "python" et pour contenu textuel "Python". pythonElt.id = "python"; // Définition de son identifiant pythonElt.textContent = "Python"; // Définition de son contenu textuel
Ajouter un nouvel élément 2.Modifiez la structure de la page Ajouter un nouvel élément Décomposons cet exemple afin de mieux le comprendre. Insertion du nouvel élément dans le DOM Il existe plusieurs techniques pour insérer un nouveau noeud dans le DOM. La plus courante consiste à appeler la méthode appendChild sur l'élément qui sera le futur parent du nouveau noeud. Le nouveau noeud est ajouté à la fin de la liste des noeuds enfants de ce parent. Dans notre exemple, le nouvel élément est ajouté comme nouveau fils de la balise <ul> identifiée par "langages", après tous les autres fils de cette balise. document.getElementById("langages").appendChild(pythonElt); // Insertion du nouvel élément
Ajouter un nouvel élément 2.Modifiez la structure de la page Ajouter un nouvel élément Ajout d'un noeud avant un autre noeud On souhaite parfois insérer un nouvel élément ailleurs que comme dernier fils de son élément parent. Dans notre exemple, on pourrait vouloir ajouter le langage Perl avant le langage PHP dans la liste. Pour cela, il existe la méthode insertBefore . On l'appelle sur le futur élément parent et on lui passe en paramètres le nouveau noeud ainsi que le noeud avant lequel le nouveau noeud sera inséré. Par exemple, le code suivant ajoute le langage Perl avant le langage PHP dans la liste. . var perlElt = document.createElement("li"); // Création d'un élément li perlElt.id = "perl"; // Définition de son identifiant perlElt.textContent = "Perl"; // Définition de son contenu textuel // Ajout du nouvel élément avant l'identifiant identifié par "php" document.getElementById("langages").insertBefore(perlElt, document.getElementById("php"));
Remplacer un noeud existant 2.Modifiez la structure de la page Remplacer un noeud existant Le remplacement d'un élément du DOM par un autre s'effectue au moyen de la méthode replaceChild. Celle-ci remplace un nœud enfant de l'élément courant par un autre nœud.Elle prend en paramètres (dans cet ordre) le nouveau noeud et celui qui est remplacé. L'exemple ci-dessous permet de remplacer le langage Java par un nouvel élément correspondant au langage Bash. . var bashElt = document.createElement("li"); // Création d'un élément li bashElt.id = "bash"; // Définition de son identifiant bashElt.textContent = "Bash"; // Définition de son contenu textuel // Remplacement de l'élément identifié par "java" par le nouvel élément document.getElementById("langages").replaceChild(bashElt, document.getElementById("java"));
Supprimer un noeud existant 2.Modifiez la structure de la page Supprimer un noeud existant Enfin, il est possible de supprimer un noeud à l'aide de la méthode removeChild . Elle prend en paramètre le noeud à supprimer du DOM. . // Suppression de l'élément identifié par "bash" document.getElementById("langages").removeChild(document.getElementById("bash"));
TP 2.Modifiez la structure de la page Modifiez le fichier langages.html afin d'ajouter sous la liste des programmes un paragraphe contenant un lien vers l'URL suivante : https://fr.wikipedia.org/wiki/Liste_des_langages_de_programmation. Voici le résultat à obtenir. .
TP 2.Modifiez la structure de la page Recupérer le fichier journaux.html Ajouter le code javascript suivants : Complétez ce fichier afin d'ajouter la liste des liens sur la page web. Vous devez utiliser le tableau journaux et chaque lien doit être cliquable. . // Liste des journaux var journaux = ["http://lemonde.fr", "http://lefigaro.fr", "http://liberation.fr"]; // TODO : ajouter la liste des journaux sur la page, dans la div "contenu"
TP 2.Modifiez la structure de la page Recupérer le fichier dictionnaire.html Vous devez ensuite compléter ce fichier afin de créer un mini-dictionnaire sur la page web. Vous devez utiliser le tableau mots et employer la balise HTML <dl> pour créer ce dictionnaire (aide sur cette balise). Chaque mot du dictionnaire doit être mis en valeur : utilisez pour cela la balise HTML <strong> .