Manipuler le DOM avec JavaScript

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.

modifier la valeur d'un attribut
modifier la valeur d'une propriété
modifier le contenu d'un élément
insérer de nouveaux éléments HTML
supprimer un attribut, une propriété
supprimer un élément
etc.

Via les keyframes (modèles d'animation de CSS 3) il est possible de modifier les valeurs des propriétés CSS des balises mais pas les valeurs des attributs de ces mêmes balises. Donc JavaScript reste alors incontournable.

le DOM

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 (d'où l'invention du framework jQuery ...)
Donc le code pour manipuler dynamiquement le HTML & CSS est désormais indépendant du navigateur : bel effort de normalisation effectué par le W3C.

Les noeuds du DOM

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.

La structure DOM d'une page

Le code d'une page

<!doctype html>
<html>
<head>
	<title>texte dans l'onglet</title>
	<meta charset ='utf-8'>
</head>
<body>
	<h1 id = 'titre'>Titre de la page</h1>
	<p id = 'texte'>Texte de la page</p>
	<p class ='rem'>Texte de la page - suite</p>
		<p>Texte de la page - fin</p>
</body></html>

Le DOM de cette page

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.

Des méthodes

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 !

Cibler un noeud de type élément

Avant de manipuler en JavaScript un élément HTML (une balise donc) 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.

Méthodes de sélection d'un élément dans un script

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 HTML 5.

document.getElementById('id') : l'argument est un ID ; référence un seul élément
document.getElementsByTagName('balise') : l'argument est une balise HTML ; référence une collection
document.getElementsByClassName('classe') : l'argument est une classe ; référence une collection

document.querySelector('sélecteur CSS')
document.querySelectorAll('sélecteur CSS')

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 sous forme d'un tableau. Donc pour extraire un élément il faut préciser son indice dans le tableau ...

La méthode querySelector()

pour accéder à la première balise P on peut écrire : document.querySelector('p')
pour accéder à la première image de la page on peut écrire : document.querySelector('img')
pour accéder au premier lien de la page on peut écrire : document.querySelector('a')
pour accéder à la balise ayant l'ID texte on peut écrire : document.querySelector('#texte')
Pour accéder à la première balise affectée de la classe rem il faut écrire :document.querySelector('.rem')

La méthode querySelectorAll()

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 mais une collection d'éléments sous forme d'un tableau. Donc il faut préciser l'indice pour cibler un seul item du tableau.
Ici la valeur de l'indice est 2 (et non pas 3) car le premier élément de la collection a l'indice 0 comme tout tableau JS.

Thème

Dans une page il y a trois images miniatures et presque transparentes. Si clic sur l'une d'elle, celle-ci s'agrandit et devient opaque.

Solution ancienne mais toujours valide

Utilisation de la "bonne vieille" méthode getElementById.

Code CSS & HTML

...
<style>
	img {display : block ;  width : 10% ; margin :10px auto ; opacity : 0.4 ;}
...
<img src = '../images/toucan.jpg' 	id ='image1'>		
<img src = '../images/tortue.jpg'	id ='image2'>		
<img src = '../images/foret.jpg'	id ='image3'>

Il faut obligatoirement ajouter un attribut id à chaque balise img !

Le script

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.

Solution plus moderne

Utilisons les nouvelles méthodes de sélection des éléments : querySelector ou querySelectorAll

Le code CSS inchangé !

Code CSS & HTML

...
<style>
	img {display : block ;  width : 10% ; margin :10px auto ; opacity : 0.4 ;}
...
<img src = '../images/toucan.jpg' >		
<img src = '../images/tortue.jpg' >		
<img src = '../images/foret.jpg' >

Le code HTML est beaucoup plus simple ; les ID ont disparu.

Le script

Il n'est pas plus long que dans la solution traditionnelle. 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

Pour cibler la première image j'aurais pu écrire : document.querySelectorAll('img')[0]

Le rendu du code :

Le rendu est exactement identique a celui qu'aurait donné la solution traditionnelle.
Le seul intêrêt de la solution moderne est d'avoir un code HTML plus succinct. Mais attention il faut savoir compter. Voir encadré ci-dessous.

Récupérer des informations sur le DOM

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 cette valeur.

Un élément se caractérise par un contenu, des attributs (src, class, alt, title, style, etc.) et des propriétés. Nous allons ci-dessous comment récupérer les valeurs de ces différents paramètres en fonction de leur nature (contenu, attributs, propriétés).

Récupération du contenu d'un élément

Le code HTML de la page (extrait)

...
<h1>Le pays d'<u>Ardres</u></h1>
<img src = '../images/ardres.jpg'>
<h2>Le lac d'Ardres en hiver</h2>
<p><b>Ardres</b> est connu pour son lac qui est un havre de tranquillité</p>
<button onclick ="finfos()">Infos sur les éléments de la page </button>

Le script (sans la balise SCRIPT)

function finfos() 
{
// création de variables objet 
	titre = document.querySelector('h1') ; 
	para = document.querySelector('p') ; 
	alert("contenu HTML du titre :  " + titre.innerHTML);
	alert("texte uniquement du titre : " + titre.textContent); 
	alert("contenu HTML  du paragraphe: " + para.innerHTML); 
	alert("texte uniquement du paragraphe : " + para.textContent); 
	
	image = document.querySelector('img');
	alert("attribut alt de l'image ? " + image.hasAttribute('alt')); 
	alert("attribut src de l'image ? " + image.hasAttribute('src')); 
}

titre est une variable objet qui référence la balise H1 de la page.
para quant à elle référence la première (et unique) balise P de la page.
image référence l'image unique de la page.

Pour récupérer le contenu d'un élément on dispose de deux propriétés : innerHTML et textContent.
Attention innerHTML retourne le contenu HTML d'une balise : texte et balisage alors que textContent ne retourne que le texte (sans le balisage interne).

Pour savoir si l'image dispose de certains attributs j'ai utilisé une instruction basée sur la méthode élément.hasAttribute(attribut). Cette méthode retourne true ou false.

Le rendu du code :

Récupération des attributs

Théme : on veut récupérer les valeurs des différents attributs d'une image (src, alt, title, class, etc.)

Le code de la page (extraits)

...
<img src ='../images/toucan.jpg' alt ='toucan' title ='le toucan' class="centre" 
	style ="box-shadow : 5px 5px 5px gray;" >
<button onclick ="finfo()">Infos sur l'image</button>
<script>
function finfo()
{
	var vinfo ; 
	// première solution : élémenet.getAttribute(attribut)
	var image = document.querySelector('img') ; 
	vinfo = image.getAttribute('src'); 
	alert('source image : ' + vinfo);
	vinfo = image.getAttribute('alt'); 
	alert('texte alternatif image: ' + vinfo); 
	vinfo =image.getAttribute('title'); 
	alert('légende image: ' + vinfo); 
	vinfo =image.getAttribute('class'); 
	alert('class affecté à l\'image: ' + vinfo); 
	vinfo =image.getAttribute('style'); 
	alert('style en ligne : ' + vinfo); 
}
</script>
...

Le rendu du code :

Nouvelle version du script avec la syntaxe simplifié

Pour récupérer les valeurs d'attributs on peut utiliser un syntaxe simplifiée (à la place de la méthode élément.getAttribute(attribut)). Syntaxe simplifiée élément.attribut. function finfo() { var vinfo ; 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); }

Le rendu du script avec la syntaxe simplifiée :

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 ce qui l'est moins c'est avec la syntaxe simplifiée, il faut utiliser le mot className (et non pas "class"). En effet 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() ; la syntaxe est un peu plus lourde mais le code est plus solide.

Récupération des propriétés de style d'un élément

Dans certains ouvrages vous pourrez lire que pour récupérer une propriété CSS associée à un élément, on peut utiliser la syntaxe : élément.style.propriété

N'utilisez surtout pas cette syntaxe !
En effet ça fonctionne mais à condition que les propriétés de style de l'élément soient "en ligne" (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).

Le code HTML de l'exemple

...
<link href ="../style.css" rel = "stylesheet" >
<!-- avec entre autres la définition de la classz 'centre' spécifique aux images -->
<style>
	h1 {background-color : yellow ; height : 50px ; line-height : 50px ; 
		border : 2px solid red ; }
...
	<h1>Titre de la page</h1>
	<img src ='../images/toucan.jpg'  class =" centre " 
		style = "opacity : 0.5; border : 1px solid black " >
	<button>infos sur mise en forme de l'image</button>
	<button>infos sur mise en forme du titre </button>

Le script

// variables  pour référencer deux noeuds.
var titre = document.querySelector('h1') ; 
var image = document.querySelector('img'); 
document.querySelector('button').onclick = function() 
{
	var vinfo = getComputedStyle(image).opacity ; 	
	alert("valeur de opacity : " + vinfo); 
	var vinfo = getComputedStyle(image).border ; 	
	alert("valeur de border : " + vinfo);
	var vinfo = getComputedStyle(image).marginLeft ; 
	alert("valeur de margin left : " + vinfo); 
	var vinfo = getComputedStyle(image).marginTop ; 
	alert("valeur de margin top : " + vinfo); 
	var vinfo = getComputedStyle(image).display ;	
	alert("valeur de display : " + vinfo); 
}
document.querySelectorAll('button')[1].onclick = function()
{
	vinfo = getComputedStyle(titre).backgroundColor ; 		
	alert("valeur de background-color : " + vinfo); 
	vinfo = getComputedStyle(titre).height ; 				
	alert("valeur de height : " + vinfo);
	vinfo = getComputedStyle(titre).lineHeight ; 			
	alert("valeur de line-height : " + vinfo);
	vinfo = getComputedStyle(titre).border ; 				
	alert("valeur de border : " + vinfo);
	vinfo = getComputedStyle(titre).fontSize ; 				
	alert("valeur de font-size : " + vinfo ); 
	vinfo = getComputedStyle(titre).marginTop ; 			
	alert("valeur de margin top : " + vinfo ); 
}

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 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.

Le rendu du code :

Attention, pour les noms des propriétés de style, vous devez utiliser la syntaxe JS.
En effet en JavaScript le tiret milieu est un opérateur (soustraction).
Donc pour passer du nom CSS de la propriété au nom 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	nom en CSS	nom en JS
couleur de fond	background-color	backgroundColor
bordure (méga propriété)	border	border
hauteur de ligne	line-height	lineHeight
marges externes	margin	margin

On appelle cette technique de nommage : "camelCase".

Modifier les éléments HTML

Vous savez donc récupérer les paramètres d'un élément du DOM (contenu, attributs, propriétés CSS).
Mais pour obtenir des pages dynamiques (qui changent d'aspect sans rechargement de celle-ci) il faut pouvoir modifier les valeurs de ces paramètres : contenu, attributs, propriétés.

Modifier le contenu d'un élément

Thème : 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

...
	<h2>Le pays d'Ardres</h2>
	<figure>
		<img src = '../images/ardres.jpg' class ="centre">
		<figcaption>Le lac d'Ardres en hiver</figcaption>
	</figure>
	<p>Ardres est connu pour son lac qui est un havre de tranquillité.</p>
	<img src ='../images/francais.jpg' class ='miniature' 
		title = 'version française'>
	<img src ='../images/anglais.jpg' class ='miniature' 
		title = 'version anglaise'>

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 = "<b>Ardres est connu pour son lac qui est un havre de tranquillité.</b>"; 
	legende_image.textContent = "Le lac d'Ardres en hiver"; 
} // fin fonction 
function angl() 
{		// page en anglais
	titre.textContent = "Country of Ardres" ; 
	texte.innerHTML = "<b>Ardres is known for his lake which is a place of tranquillity.</b>"; 
	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 (l'union jack) on appelle la fonction angl qui remplit chaque élément avec un texte anglais.

Affichez cette page en français puis en anglais :

Modifier les valeurs des attributs

Thème : désormais sur beaucoup de sites et dans le cadre du formulaire de connexion, les caractères que vous saisissez dans un champ "mot de passe" peuvent être affichés. Il suffit qu'un script transforme le type de ce champ : de type "password" à type "text".

Le code HTML

<form name ="f" action = "inscription_trait.htm"  method ='post'>
	<label>Tapez votre identifiant : </label>	
		<input type = "email"  name ="identifiant" required>
	<label>Saisissez  le mot de passe :</label>
		<input type = "password"  required name ='motdepasse'> 
		<img src ="../images/oeil.png" style ="height : 50px; width : auto;"  title ="afficher le mot de passe" 
			onclick ="f_oeil()">	
</form>

Une image représentant un oeil (facile à trouver sur la toile) est affichée à côté du champ de type "password".
Une légende est associée à l'image : 'afficher le mot de passe'.
Si clic sur cette image : appel d'une fonction.

Le script

Il est d'un simplicité déroutante: function f_oeil() { if (f.motdepasse.getAttribute('type')=='password') {f.motdepasse.setAttribute('type','text'); } else {f.motdepasse.setAttribute('type','password'); } }

Si le champ "motdepasse" est de type "password" alors il devient de type "text".
Sinon c'est l'inverse.

Le rendu du code :

Syntaxe

Pour récupérer la valeur d'un attribut il faut utiliser la méthode élément.getAttribute('attribut')
Pour modifier la valeur d'un attribut il faut utiliser la méthode élément.setAttribute('attribut','nouvelle valeur').
La première méthode est de "getter" et la deuxième méthode est "setter". Vous découvriez qu'en jQuery une même méthode peut être utilisée en tant que "getter" ou "setter".

Pour récupérer la valeur d'un attribut on peut aussi utiliser une syntaxe simplifié : élément.attribut.

Supprimer un attribut

Vous pouvez aussi devoir supprimer des attributs de balise avec la syntaxe : élément.removeAttribute('attribut').
Exemple : cliquez sur une image pour l'effacer.
Le code correspondant : ... <body> <p>Cliquez sur une image pour l'effacer ! <br><img src ="../images/bikini.jpg" class ="image" onclick ="fsupp(this)"> <img src ="../images/trikini.jpg" class ="image" onclick ="fsupp(this)"> <img src ="../images/burkini.jpg" class ="image" onclick ="fsupp(this)"> <script> function fsupp(image) { image.removeAttribute("src"); } </script> ...

Le rendu du code :

Modifier les propriétés de style

Dans la page et selon que je clique sur le bouton "plus" ou "moins" l'image est plus ou moins opaque et plus ou moins grande.

Le code HTML correspondant

...
<h1>Modification d'une propriété et d'un attribut</h1>
<img  src ='../images/toucan.jpg' style =" display : block ; margin : 20px auto ; opacity : 0.1;" width ="200" >
<br><button id ="infos">Infos</button>
<button id ="plus">PLUS</button>
<button id ="moins">MOINS</button>
...

Cet exemple est aussi une révision sur la modication d'une valeur d'attribut puisque la largeur de l'image est définie avec l'attribut "width".

Le script

	var image = document.querySelector('img'); 
	var vopacite = getComputedStyle(image).opacity ; 
	var vlargeur =image.width ; 
	var vlargeur2 =image.getAttribute('width'); 

document.querySelector('#infos').onclick = function()
		{alert(vlargeur + " "+ typeof(vlargeur)) ; 
		alert(vopacite + " " + typeof(vopacite));
		alert(vlargeur2); }
	
document.querySelector('#plus').onclick = function()
		{ vopacite = parseFloat(vopacite) ; vopacite +=0.1; image.style.opacity = vopacite ; 
		vlargeur = vlargeur + 50; image.setAttribute('width',vlargeur);  }
	
document.querySelector('#moins').onclick = function()
		{ vopacite = parseFloat(vopacite) ; vopacite -=0.1; image.style.opacity = vopacite ;
		vlargeur =vlargeur -50;  image.width =vlargeur;  }

Je récupère la largeur de l'image selon deux techniques dans vlargeur & vlargeur2.

Trois fonctions anonymes !

La fonction anonyme d'information indique que la largeur de l'image est nativement de type number alors que l'opacité est nativement de type string.

Pour faire varier l'opacité il faut donc faire une conversion avant incrémentation ou décrémentation.
Alors que pour faire varier la taille on peut incrémenter ou décrémenter directement.

Pour faire varier la valeur de l'attribut "width" j'utilise deux techniques.
Alors que pour faire varier la valeur de la propriété "opacity" je ne dispose que d'une seule syntaxe.

Rappels de syntaxe

Pour récupérer la valeur d'un attribut on peut toujours utiliser la syntaxe simplifiée élément.attribut OU la méthode élément.getAttribute('attribut')
Pour modifier la valeur d'un attribut choix entre syntaxe simplifiée élément.attribut = valeur OU la méthode élément.setAttribute('attribut',valeur) pour la modifier.

Pour une propriété, la récupération de la valeur doit toujours se faire avec la méthode getComputedStyle(élément).propriété et la modification avec la syntaxe élément.style.propriété = valeur.

Le rendu du code :

Modifier le CSS - exercice

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.

Le rendu du code :

Le code CSS & HTML

...
<style>
	img {display : none ;  width : 22% ; margin : 1%; vertical-align : top;}
</style></head>
<body>
<h1>Un bel album photos </h1>
	<button type ='button'>afficher images</button>
	<button type ='button'>masquer images</button>
	<img src = '../images/jolie_fille.jpg'>	
	<img src = '../images/trikini.jpg'>	
	<img src = '../images/bikini.jpg'>	
	...
	<img src = '../images/noire_bikini.jpg'>	
	<img src = '../images/black_nue.jpg'>

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.

Le script - extrait

Je ne vous communique qu'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 ; document.querySelector('button').onclick = function() { for(i in images_page) { images_page[i].style.display = 'inline' ; } } // fin fonction

Notez l'emploi de document.image : collection d'images de la page.
Mais j'aurais pu aussi écrire : var image_page = document.querySelectorAll('img')
La structure FOR ... IN ... est très utile pour traiter toute une collection d'objets.

Changer de classe, rajouter une classe

Vous savez que le moyen le plus simple (et le plus efficace) de mettre en forme un élément HTML et de lui attribuer une voire plusieurs classes.

Exemple

Le code CSS & HTML d'une page est le suivant : ... <style> .cadre {border : 5px solid gold; border-radius : 20px ; box-shadow : 5px 5px 5px gold;} .image {width : 25%; display : inline-block; vertical-align : top; margin:1%;} </style> </head> <body> <img src ="../images/bikini.jpg" class ="image"> <img src ="../images/trikini.jpg" class ="image"> <img src ="../images/burkini.jpg" class ="image"> <button onclick ="fcadre()">Ajouter un cadre aux photos</button>

Donc la classe "image" est déjà attribuée aux images. C'est elle qui redimensionne et positionne les images.
Objectif du script : nous voulons que le script rajoute la classe "cadre" (bordure + ombrage + coins arrondis) aux différentes images.

Mauvaise solution

function fcadre()
{
	var collection = document.querySelectorAll('img'); 
	for (var i in collection)
	{	
		collection[i].className ="cadre"; 
	}
}

La variable "collection" est un tableau qui référence toutes les images.
Il faut ensuite parcourir ce tableau et utiliser pour chaque item l'attribut className (et non pas "class"). En effet le terme "class" est déjà utilisé en JS.

Le rendu du code faux :

C'est la "cata" ! Certes la classe "cadre" est ajoutée mais la classe "image" est retirée donc les images sont affichées avec leur taille native. Il y a donc remplacement et non rajout de classe.

Bonne solution

...
	{	
		collection[i].className +=" cadre"; 
	}
...

A première vue c'est la même instruction
Et bien non. L'instruction unique de la boucle est différente pour deux détails.
J'ai remplacé "=" par "+=" et "cadre" par " cadre". (un espace après les guillemets début).
Donc le code HTML pour chaque image devient : < img src =" ..." class ="image cadre" >
Chaque image se voit donc affectée deux classes !

Le rendu du code correct :

Troisième solution

La nouvelle version de JavaScript a ajouté l'objet classList et c'est heureux car on peut produire un code plus robuste.

classList.length
classList.add(nomClasse)
class.List.remove(nomClasse)
classList.toggle(nomClasse)
classList.replace(classe0,classe1)

La méthode add() ajoute la classe précisée si elle n'existe déjà pas.

La méthode remove() supprime la classe précisée.

La méthode toggle() ajoute (si elle n'existe pas) la clase ou la supprime si elle existe.

La méthode replace() remplace "classe0" par "classe1".

Pour reprendre le thème de l'ajout d'une deuxième classe à chaque image on peut donc écrire :
collection[i].classList.add("cadre");

A propos de l'objet classList

Thématique : on peut appliquer à une page différentes mise en forme selon le bouton de commande cliqué.

Le code CSS & HTML

...
<style>
	 section {width : 100% ; height : 600px ; border : 2px solid black ; margin : auto ; }
	.marine {background : aqua ; color : navy ; border-color : navy ;  }
	.gothique {background : black ; color : red  ;border-color : red ;  }
</style>
</head>
<body>
	<section class ="modif">
		<h3 class ="modif">Changer la mise en forme d'une page avec jQuery</h3>
		<p class ="modif">Text du paragraphe
		<br>Blabla ....
		<br>Blabla ....
		<br>Blabla ...
		</p>
		<button onclick ="f1()">Appliquer la classe "marine"</button>
		<button onclick ="f2()">Appliquer la classe "gothique"</button>
	</section>
...

Certains éléments sont affectés de la classe "modif" ; classe qui n'est pas définie dans la feuille de style.
Cette classe sert seulement à créer la collection des éléments modifiables par le script.

Le script

var tab = document.querySelectorAll(".modif");
function f1()
{
	for (var i in tab) 	
	{  
		tab[i].classList.remove('gothique'); 
		tab[i].classList.toggle('marine') ; 	
	}
}	
function f2()
{
	for (var i in tab) 	
	{ 
		tab[i].classList.remove('marine'); 
		tab[i].classList.toggle('gothique') ; 	
	}
}

Le rendu du code :

En cliquant deux fois de suite sur le même bouton de commande toute mise en forme est retirée.

Ajouter / supprimer des éléments

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 se fait à partir de l'élément parent.
Avec la méthode removeChild() la suppression se fait aussi à partir le l'élément parent.

Ajouter/supprimer un élément à partir du parent - exemple 1

Théme : insertion dans une page d'un lien vers une feuille de style externe puis d'une image et enfin suppression des boutons d'insertion.

Le code correspondant

...
<section>
	<h1>Titre général</h1>
	<p>Page très moche car aucun CSS !!!
	<br>Blabla ...	</p>
	<h2>Titre de niveau 2</h2>
	<p>Corps du texte associé au titre de niveau 2.
	<br>Blabla ...</p>
	<h2>Titre de niveau 2</h2>
	<p>Corps du texte associé au titre de niveau 2.
	<br>Blabla ...</p>
</section>
<button>Mettre en forme la page</button>
<button>Insérer une image dans cette page</button>
...

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).

Le script

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)
}

Si clic sur le premier bouton il y a alors insertion d'une balise LINK dans la partie HEAD. Cet élément charge une feuille de style.
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)

Après avoir été cliqué chaque bouton est supprimé via la méthode parent.removeChild(enfant)

Le rendu du code :

Ajouter / supprimer des éléments - exemple 2

Pour ajouter un nombre variable d'éléments de même nature il faut créer une routine et l'appeler un nombre indéterminé de fois via la méthode setInterval()

Thématique : création d'un patchwork d'images coquines.

Le code CSS & HTML

...
<style>
	div {position : relative ;  margin : 10px auto;} 
	img {position : absolute; width : 10%;}
...
	<div  id ="eau" style = "width : 100% ; height : 500px ; background : aqua ; ">	</div>
	<button onclick ="clearInterval(routine);this.remove();" >Mettre fin à la routine de génération d'images</button>
...

Pour que les positions absolues des images insérées soient calculées par rapport au coin haut gauche de la boite "eau" il faut que celle-ci soit aussi positionnée.
Si clic sur le bouton : exécution de deux instructions JS.
clearInterval(routine) met fin à l'appel régulier d'une fonction ; appel régulier identifié "routine".

pour supprimer le bouton de commande j'utilise pas la méthode removeChild() mais remove().
J'explique plus loin dans ce chapitre cette solution alternative pour la suppression d'un élément.

Le script

function ajout()
{
	var x ; var y; 
	x = Math.floor(Math.random()*90);
	y = Math.floor(Math.random()*300);
	x =x +"%"; 
	y=y+"px ";
	var parent =document.querySelector("#eau");
	var image=document.createElement("img");
	var reel = Math.random() ;
	var entier = Math.ceil(reel*25) ;  // génération aléatoire d'un entier compris entre 1 et 25
	switch(entier)
		{
			case 1 : image.src ="../images/japonaise_nue.jpg" ; break;
			case 2 : image.src ="../images/black_nue.jpg" ; break;
			case 3 : image.src ="../images/seins_nus.jpg" ; break;
			case 4 : image.src ="../images/noire_bikini.jpg" ; break;
			...
			case 20 : image.src ="../images/bikini23.jpg" ; break;
			case 21 : image.src ="../images/bikini24.jpg" ; break;
			case 22 : image.src ="../images/bikini25.jpg" ; break;
			case 23 : image.src ="../images/bikini26.jpg" ; break;
			case 24 : image.src ="../images/bikini27.jpg" ; break;
			case 25 : image.src ="../images/bikini28.jpg" ; break;
		} // fin switch 
	image.style.left =x; 
	image.style.top = y;
	parent.appendChild(image);
} // fin fonction ajout
var routine = setInterval(ajout,500);

La fonction ajout() est appelée toutes les 500 millisecondes (2 fois par seconde). Cet appel régulier d'une fonction est identifié par la variable "routine".

Dans la fonction ajout() on crée un nouvel élément de type IMG, on lui affecte un SRC, on lui affecte un "left" et un "top". Enfin on l'insère dans le parent (boite à fond 'aqua').

Testez ce code :

Une autre façon de supprimer des éléments

Pour supprimer des éléments de la page il existe aussi la méthode élément.remove() comme je l'ai montré dans le script précédent.
Cette méthode est plus simple à mettre en oeuvre que parent.removeChild(enfant).
Nous allons l'expliquer grâce à deux exemples.

Exemple 1

Reprenons le thème : suppression de l'image courante dans une page.
Dans une première solution, nous avions supprimé l'attribut SRC pour effacer l'image mais nous pouvons aussi "remove" l'image courante

Le code de la page

...
<p>Cliquez sur une image pour l'effacer ! 
<br><img src ="../images/bikini27.jpg" class ="image" onclick ="fsupp(this)">
<img src ="../images/bikini28.jpg" class ="image" onclick ="fsupp(this)">
<img src ="../images/bikini7.jpg" class ="image" onclick ="fsupp(this)">
<img src ="../images/bikini25.jpg" class ="image" onclick ="fsupp(this)">
<img src ="../images/bikini26.jpg" class ="image" onclick ="fsupp(this)">
<script>
function fsupp(image)
{
	image.remove(); 
}
</script>
...

La classe "image" aligne verticalement toutes les images par le haut avec une largeur de 16% , etc.

Testez ce code !

Actualisez la page pour réafficher les images effacées !

Exemple 2 : suppression par un simple clic de toutes les images de la page

Dans ce deuxième exemple un bouton de commande permet par simple clic de supprimer toutes les images !

Le code de la page

...
<p>Cliquez sur une image pour l'effacer ! 
<br><img src ="../images/bikini27.jpg" class ="image" >
<img src ="../images/bikini28.jpg" class ="image" >
<img src ="../images/bikini7.jpg" class ="image" >
<img src ="../images/bikini25.jpg" class ="image" >
<img src ="../images/bikini26.jpg" class ="image">
<button onclick ="fsupp()" >Supprimer toutes les images</button>
<script>
function fsupp()
{
var images = document.querySelectorAll('img'); 
	for (var i in  images) 
	{
		images[i].remove(); 
	}
} // fin fonction
</script>

La classe "image" aligne verticalement toutes les images par le haut avec une largeur de 16% , etc.

La variable images représente la collection de toutes les images de la page.
Il suffit ensuite de parcourir cette collection avec une boucle.

Rendu du code !

Actualisez la page pour réafficher toutes les images !

Traduction

Tutoriel JavaScript & jQuery - sommaire

JavaScript

jQuery - célèbre bibliothèque JavaScript

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Manipuler le DOM avec JavaScript

le DOM

Les noeuds du DOM

La structure DOM d'une page

Le code d'une page

Le DOM de cette page

Des méthodes

Cibler un noeud de type élément

Méthodes de sélection d'un élément dans un script

La méthode querySelector()

La méthode querySelectorAll()

Thème

Solution ancienne mais toujours valide

Code CSS & HTML

Le script

Solution plus moderne

Code CSS & HTML

Le script

Récupérer des informations sur le DOM

Récupération du contenu d'un élément

Le code HTML de la page (extrait)

Le script (sans la balise SCRIPT)

Récupération des attributs

Le code de la page (extraits)

Nouvelle version du script avec la syntaxe simplifié

Récupération des propriétés de style d'un élément

Le code HTML de l'exemple

Le script

Modifier les éléments HTML

Modifier le contenu d'un élément

CSS & HTML

Le script

Modifier les valeurs des attributs

Le code HTML

Le script

Syntaxe

Supprimer un attribut

Modifier les propriétés de style

Le code HTML correspondant

Le script

Rappels de syntaxe

Modifier le CSS - exercice

Le code CSS & HTML

Le script - extrait

Changer de classe, rajouter une classe

Exemple

Mauvaise solution

Bonne solution

Troisième solution

A propos de l'objet classList

Le code CSS & HTML

Le script

Ajouter / supprimer des éléments

Ajouter/supprimer un élément à partir du parent - exemple 1

Le code correspondant

Le script

Ajouter / supprimer des éléments - exemple 2

Le code CSS & HTML

Le script

Une autre façon de supprimer des éléments

Exemple 1

Le code de la page

Exemple 2 : suppression par un simple clic de toutes les images de la page

Le code de la page