Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site
Grâce à un script vous pouvez modifier l'aspect initial d'une page sans rechargement de celle-ci (donc sans requête HTTP).
On dit que l'on "dynamise" la page. On parlait avant de DHTML (dynamic HTML) mais le terme n'est plus à la mode.
On dit désormais que l'on modifie le DOM de la page !
Le DOM est une interface de programmation qui nous permet de manipuler le code HTML & CSS d’une page web de façon dynamique
en utilisant le langage JavaScript.
Le DOM est créé automatiquement lors du chargement d’une page web par le navigateur.
Désormais tous les navigateurs génèrent le même DOM ce qui n'était pas le cas à l'origine.
Donc le code pour manipuler dynamiquement le HTML & CSS est désormais
indépendant du navigateur : bel effort de normalisation effectué par le W3C.
Tout dans une page web doit être considéré comme un noeud ("node" en anglais).
Le document HTML est un noeud, chaque élément HTML est un noeud, les attributs des balises sont des noeuds, le texte de chaque balise est aussi un noeud.
Sachez aussi qu’il existe plusieurs types de nœuds : le type ELEMENT (pour les balises HTML), le type de nœud TEXTE, etc.
Texte de la page
Texte de la page - suite
Texte de la page - fin
Le DOM de cette page va être construit comme une hiérarchie de nœuds. On peut le représenter sous forme d'un arbre.
Sachez que la page HTML est le noeud le plus haut hiérarchiquement et appelé : DOCUMENT.
Toutes les balises doubles ou simples de la page constituent des noeuds de type ELEMENT (ou plus simplement élements).
Ainsi la balise double HTML est un noeud de type ELEMENT.
Le noeud HTML comprend deux "enfants" : HEAD et BODY. Pour ces deux "enfants" HTML est l'élément "parent".
L'élément HEAD contient à son tour deux enfants : TITLE et META. On peut dire aussi que TITLE et META ont pour "parent" HEAD.
L'élément BODY contient quatre enfants : H1 et trois balises P.
L'API DOM ce n'est pas uniquement la représentation de la page sous forme d'une arborescence. Le DOM c'est un ensemble de méthodes et propriétés pour accéder aux noeuds et plus précisément aux
Après avoir référencé un élément HTML il est possible d'accéder à son contenu, récupérer la valeur d'un attribut, récupérer le CSS de l'élément correspondant.
Il est également possible de modifier le contenu de l'élément, modifier la valeur d'un attribut, modifier le CSS élément.
On peut même rajouter des éléments voire supprimer certains éléments !
Avant de manipuler en JavaScript un élément il faut pouvoir le cibler.
Il existe plusieurs méthodes pour accéder à un élément HTML mais toutes ont un point commun : elles retournent un objet !
Donc la syntaxe générique est : variable = méthode de ciblage d'un élément HTML
Après cette instruction la variable créée n'est pas une variable simple (qui stocke une primitive) mais une variable objet qui référence dans le
script un élément HTML du document.
Dans la suite du script l'élément HTML sera toujours désigné par sa variable objet !
Il faut utiliser le DOM et en particulier les méthodes de l'objet document.
Il faut distinguer les anciennes méthodes et les nouvelles introduites par HTML5.
Ces deux nouvelles méthodes ont pour argument un sélecteur CSS.
Attention la première méthode cible un seul élément (le premier correspondant au sélecteur CSS) alors que la deuxième
méthode peut référencer une collection d'éléments (tous ceux correspondant au sélecteur CSS) sous forme d'un tableau indicé .
Et si vous voulez cibler la troisième balise P de la page et que cet élément n'a ni l'attribut ID ni l'attribut class comment faire ?
Il suffit d'écrire : document.querySelectorAll('p')[2]
Notez que l'on a utilisé la méthode querySelectorAll() argumentée avec 'p' mais suivie d'un indice.
En effet la méthode querySelectorAll retourne non pas un élément une collection d'éléments sous forme d'un tableau indicé.
Donc il faut préciser l'indice pour cibler un seul élément !
Ici la valeur de l'indice est 2 (et non pas 3) car le premier élément de la collection a l'indice 0, la deuxième a l'indice 1 et
le troisième élément a l'indice 2, etc.
Chaque image est une miniature transparente : sur clic elle s'agrandit et devient opaque.
Utilisation de la "bonne vieille" méthode getElementById.
Grâce au CSS les images chargées sont par défaut masquées : img{display : none ; }
Donc pour les démasquer il faut que pour chaque image la valeur de la propriété display passe à inline !
Il s'agit donc d'un changement de valeur d'une propriété de style pour une collection d'objets.
Il faut donc associer à chaque bouton de commande une fonction qui consiste en une boucle qui traite toute la collection d'images de la page.
Je ne vous communique d'une fonction anonyme sur les deux. A vous de trouver le code de la seconde.
Vous devez entre autre sélectionner le deuxième bouton de commande (indice de rang 1 dans la collection des boutons).
var images_page = document.images ; // utilisation de l'objet document.images qui référence toutes les images de la page // fonction anonyme pour afficher les images document.querySelector('button').onclick = function() { for(i in images_page) { images_page[i].style.display = 'inline' ; } } // fin fonction // fonction anonyme pour remasquer les images ...
Notez l'emploi de document.image : collection d'images de la page.
La structure FOR ... IN ... est très utile pour traiter toute une collection d'objets.
Sachez que l'on peut encore aller plus loin dans la modification du DOM. On peut en effet ajouter de nouveaux éléments voire supprimer des éléments existants.
Pour insérer / supprimer de nouveaux éléments il faut pouvoir se déplacer dans le DOM car l'ajout / suppression se fait à partir de l'élément parent.
Dans l'exemple le script retourne le "parent" ou les "enfants" de certains éléments.
Corps de texte associé au titre général. Blabla ...
Corps du texte associé au titre de niveau 2. Blabla ...
Corps du texte associé au titre de niveau 2. Blabla ...
document.querySelectorAll('button')[0].onclick = function() { var enfant = document.querySelector('h1'); var parent = enfant.parentNode ; alert('balise parente de H1 :' + parent.nodeName) ; alert('contenu de cette balise :' + parent.innerHTML) ; } document.querySelectorAll('button')[1].onclick = function() { var parent = document.querySelector('section'); var premier = parent.firstElementChild ; alert('premier enfant de section : ' + premier.nodeName) ; alert('texte de cette balise : ' + premier.textContent) ; var dernier = parent.lastElementChild ; alert('dernier enfant de section :' + dernier.nodeName) ; alert('texte de cette balise : ' + dernier.textContent); } document.querySelectorAll('button')[2].onclick = function() { var parent = document.querySelector('section'); var enfants = parent.childNodes; var nombre = enfants.length; alert("nombre d'enfants de section : " + nombre); }Testez cette page
Rappels sur deux propriétés déjà connues : textContent retourne le contenu textuel d'un élément tandis que innerHTML retourne tout le contenu (texte et balisage) !
La propriété parentNode pointe l'élément parent du noeud sélectionné.
La propriété nodeName indique le type de balise correspondante.
Les propriétés firstElementChild et lastElementChild pointent respectivement le premier élément enfant
et le dernier élément enfant d'un parent.
childNodes est un tableau de tous les noeuds de l'élément parent.
Manipuler le DOM c'est aussi pouvoir créer de nouveaux noeuds et en supprimer d'autres.
Pour ajouter un élément à la page il faut utiliser successivement les méthodes createElement() et appendChild()
Exemple : insertion dans une page d'un lien vers une feuille de style externe puis d'une image et enfin suppression des boutons d'insertion.
Page très moche car aucun CSS !!!
Blabla ...
Corps du texte associé au titre de niveau 2.
Blabla ...
Corps du texte associé au titre de niveau 2.
Blabla ...
La page est très moche car il n'y a pas de CSS (pas de lien vers la feuille de style externe du site).
var page = document.querySelector('body'); var bouton1 =document.querySelector('button'); var bouton2 =document.querySelectorAll('button')[1]; bouton1.onclick = function() { var lien =document.createElement('link'); lien.href ="../style.css"; lien.rel ="stylesheet"; document.querySelector('head').appendChild(lien); document.querySelector('p').textContent ="Page désormais plus jolie !!!" ; page.removeChild(bouton1); // suprression bouton1 (enfant de page) } bouton2.onclick = function() { var image =document.createElement('img'); image.src ="../images/bikini.jpg"; image.alt ="jolie fille en bikini"; image.style.width ="200px"; document.querySelector('section').appendChild(image); page.removeChild(bouton2); //suppression bouton2 (enfant de page) }Testez ce code
Si clic sur le premier bouton il y a alors insertion d'une balise LINK qui charge une feuille de style. Donc la page est beaucoup plus jolie !
Si clic sur deuxième bouton il y a alors insertion dans la boite SECTION d'une belle image.
Dans les deux cas il faut d'abord créer un nouvel élément avec la méthode createElement(type de balise)
puis il faut donner des attributs à cet élément et enfin il faut insérer l'élément avec la méthode parent.appendChild(enfant)
La balise LINK est insérée dans HEAD et l'image est insérée dans la boite SECTION.
Après avoir été cliqué chaque bouton est supprimé.
Création d'un élément : variable_objet = document.createElement('type de balise')
Insertion d'un élément : parent.appendChild(enfant)
Suppression d'un élément : parent.removeChild(enfant)
L'insertion / suppression d'un élément se fait toujours au niveau du conteneur parent.