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.
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.
Il faut obligatoirement ajouter un attribut id à chaque balise img !
document.getElementById('image1').onclick = function()
{ this.style.opacity = "1" ; this.style.width = "20%";}
document.getElementById('image2').onclick = function()
{ this.style.opacity = "1" ; this.style.width = "20%";}
document.getElementById('image2').onclick = function()
{ this.style.opacity = "1" ; this.style.height = "20%";}
On associe à chaque image une fonction anonyme. Notez l'emploi du mot réservé this.
Il faut mieux utiliser les nouvelles méthodes de sélection des éléments : querySelector ou querySelectorAll
Le code CSS inchangé !
Le code HTML est beaucoup plus simple ; les ID ont disparu.
document.querySelector('img').onclick = function()
{ this.style.opacity = "1" ; this.style.width = "20%";}
// si clic sur première image
document.querySelectorAll('img')[1].onclick = function()
{ this.style.opacity = "1" ; this.style.width = "20%";}
// si clic sur deuxième image
document.querySelectorAll('img')[2].onclick = function()
{ this.style.opacity = "1" ; this.style.width = "20%";}
// si clic sur troisième image
Maintenant que vous savez cibler en JavasScript un élément du DOM vous pouvez récupérer toutes les infos possibles sur cet élément.
La récupération d'un paramètre d'un élément est souvent un préalable à sa modification. Un seul exemple : si vous voulez augmenter l'opacité d'une image
il faut récupérer la valeur initiale de la propriété opacity puis incrémenter.
Un noeud de type élément (ou élément) se caractérise par un contenu, des attributs (src, class, alt, title, style, etc.) et des propriétés de style.
titre est une variable objet qui référence la balise H1 de la page.
Legende_image est une variable objet qui référence la balise H2 de la page.
texte quant à elle référence la balise P de la page.
Pour récupérer le contenu d'un élément on a deux propriétés : innerHTML et textContent.
Attention titre.innerHTML retourne : "Le pays d'<u>Ardres</u>" tandis que titre.textContent retourne : "Le pays d'Ardres".
Donc la première propriété retourne tout le contenu d'un élément (y compris le balisage interne) tandis que la deuxième retourne uniquement le contenu textuel.
Testez cette page !
Thématique : on veut récupérer les valeurs des différents attributs d'une image.
Pour récupérer les valeurs d'attributs on peut utiliser un syntaxe simplifiée.
function finfo()
{
var vinfo ;
// première solution : élémenet.getAttribute(attribut)
var image = document.querySelector('img') ;
vinfo = image.src;
alert('source image : ' + vinfo);
vinfo = image.alt;
alert('texte alternatif image: ' + vinfo);
vinfo =image.title ;
alert('légende image: ' + vinfo);
vinfo =image.className
alert('class affectée à l\'image: ' + vinfo);
vinfo =image.style ;
alert('style en ligne : ' + vinfo);
}
Pour récupérer le nom de la classe affectée à un élément il faut argumenter la méthode getAttribute avec le mot class ;
ce qui est des plus
logiques. Par contre avec la syntaxe simplifiée il faut utiliser le mot className ce qui l'est moins ...
Mais l'explication est que le mot "class" est un mot réservé en JavaScript.
Les deux techniques ne sont pas équivalentes. Ainsi image.getAttribute('src') retourne le chemin relatif de la source alors que image.src
retourne le chemin absolu. image.style ne retourne rien d'exploitable alors qu'avec la méthode getAttribute() on obtient vraiment la valeur de
l'attribut style.
Un conseil : privilégier l'emploi de la méthode getAttribute()
Dans certains ouvrages vous pourrez lire que pour récupérer une propriété CSS associée à un élément, il faut utiliser la syntaxe : élément.style.propriété
N'utilisez surtout pas cette syntaxe !
En effet ça ne marche que si les propriétés de style de l'élément sont définies dans la balise (donc via l'attribut style).
Avec cette syntaxe il n'est donc pas possible de récupérer une propriété de l'élément définie au niveau d'une feuille de style (interne ou externe).
J'ai utilisé la méthode getComputedStyle(élément).propriété
Les deux éléments HTML sont référencés dans le script via les variables objet titre & image
Vous pouvez remarquer que j'ai récupéré des valeurs de propriétés de style quelque soit l'endroit où elles sont définies.
Ainsi pour l'élément image la propriété opacity est définie dans la balise mais la propriété display est définie dans
la feuille de style externe ("style.css") via la classe centre. Et pour l'élément titre les propriétés sont définies dans la feuille
de style interne.
Testez ce code !
Attention, vous devez utiliser la syntaxe JavaScript des propriétés de style (et non pas la syntaxe CSS) !
Il y a une différence seulement lorsque la propriété est un mot composé.
En effet en JavaScript les tirets sont interdits dans les noms ; le tiret milieu est un opérateur (soustraction).
Donc pour passer de la syntaxe CSS à la syntaxe JS il suffit de supprimer le tiret et de remplacer la lettre qui suit par son équivalent en
majuscule.
Prenons quelques exemples.
| propriété de formatage | syntaxe CSS | syntaxe JS |
|---|---|---|
| couleur de fond | background-color | backgroundColor |
| bordure (méga propriété) | border | border |
| hauteur de ligne | line-height | lineHeight |
| marges externes | margin | margin |
Vous savez maintenant récupérer des informations sur un élément (contenu, attributs, CSS).
Mais pour obtenir des pages dynamiques (qui changent d'aspect sans rechargement de celle-ci) il faut que l'on puisse
modifier le contenu et/ou attributs et/ou CSS de certains éléments.
Ma première page dynamique : un clic sur la drapeau tricolore et la page est en français ; un clic sur l'Union Jack et la page est en anglais.
CSS & HTML :
Le script :
// création de variables objet
titre = document.querySelector('h2') ;
// titre référence la balise h2
legende_image = document.querySelector('figcaption') ;
// legende_image référence la balise figcaption
texte = document.querySelector('p') ;
// texte référence la balise P
// gestion évènements
document.querySelectorAll('img')[1].onclick = fran;
// appel de la fonction fran si clic sur la deuxième image
document.querySelectorAll('img')[2].onclick = angl ;
// appel de la fonction angl si clic sur la troisième image
function fran()
{ // page en français
titre.textContent = "Le pays d'Ardres" ;
texte.innerHTML = "Ardres est connu pour son lac qui est un havre de tranquillité.";
legende_image.textContent = "Le lac d'Ardres en hiver";
} // fin fonction
function angl()
{ // page en anglais
titre.textContent = "Country of Ardres" ;
texte.innerHTML = "Ardres is known for his lake which is a place of tranquillity.";
legende_image.textContent = "The lac of Ardres during winter";
} // fin fonction
En cliquant sur la deuxième image (drapeau tricolore) on appelle la fonction fran qui remplit chaque élément avec un texte français.
En cliquant sur la troisième image (union jack) on appelle la fonction angl qui remplit chaque élément avec un texte anglais.
Attention pour le noeud texte on utilise innerHTML (et non pas textContent) pour modifier non seulement le texte mais tout le contennu (y compris le balisage) ; le texte de ce élément sera donc en gras ! Testez cette page !
Un clic sur l'image et celle-ci change (nouvelle source), s'agrandit, change de légende, etc.
le code :
Attention pour changer la valeur de l'attribut class il faut en JavaScript utiliser le terme "className".
Via le script on change les valeurs de quatre attributs : src, class, title, alt.
Testez ce code !
Vous voyez qu'il est très facile via JavasScript de changer la source d'une balise IMG.
Dans la page et selon que je clique sur le bouton "plus" ou "moins" l'image est plus opaque et plus grande OU plus transparente et plus petite.
La page comprend une image pratiquement transparente (opacity = 0,1) et un clavier tactile.
Cette quasi transparence a été définie au niveau de la feuille de style interne.
Le script consiste à modifier la valeur de la propriété de style opacity.
Mais il faut d'abord récupérer la valeur initiale avec la méthode getComputedStyle
Or la valeur récupérée est de type string comme l'indique la fonction typeof.
On ne peut incrémenter ou décrémenter directement une chaine ! Donc il faut avant la convertir en réel avec la fonction parseFloat.
En cliquant sur le bouton plus l'image devient plus opaque puisque on incrémente la variable vopacite .
En cliquant sur le bouton moinsl'image devient plus transparente puisque on décrémente vopacite.
Pour changer la valeur d'une propriété de style vous pouvez toujours utiliser la syntaxe simplifiée :
élément.style.propriété = nouvelle valeur
Par contre pour récupérer la valeur d'une propriété CSS n'utilisez pas la syntaxe simplifiée (élément.style.propriété) mais la
méthode getComputedStyle(élément).propriété. En effet la syntaxe simplifié ne fonctionne que la propriété est déclarée en ligne (via
l'attribut STYLE dans la balise).
Testez cette page !
Dans une page les images sont par défaut chargées mais masquées.
En cliquant sur un bouton le visiteur les affiche. En cliquant sur un autre bouton le visiteur les masque de nouveau.
Rendu à obtenir !
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.
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.
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.