Manipuler le DOM avec JavaScript - manipulations avancées

Dans le chapitre précédent nous nous sommes contentés de modifier les caractéristiques d'éléments existants.
Dans ce chapitre nous irons plus loin dans la modification du DOM initial.

insérer de nouveaux éléments
supprimer des éléments existants
cloner des éléments
déplacer des éléments

Se déplacer dans l'arborescence du DOM

accéder au parent d'un élément
accéder aux enfants d'un élément

Rendu d'un document HTML dans un Iframe

En cliquant sur le premier bouton de commande : les textes des deuxième et troisième paragraphes sont coloriés.
En cliquant sur le deuxième bouton de commande : la boite DIV a un fond rose.

Le code HTML

<body>
     <h3>Accéder à certains éléments en fonction de la parenté</h3>
        <p>Premier paragraphe.
        <div style ="border : 1px solid green ;" >
            <p>Deuxième paragraphe.
            <p>Troisième paragraphe.
        </div>
        <p>Quatrième paragraphe.
		<br><button onclick ="f1()">Accéder aux éléments enfants de DIV</button>
		<br><button onclick ="f2()">Accéder à l'élément parent du deuxième paragraphe</button>
</body>

Le script

function f1()
{
	let boite = document.querySelector('div'); 
	let aine_boite = boite.firstElementChild ;
	// premier enfant de DIV
	let cadet_boite = boite.lastElementChild ;
	// dernier enfant de DIV
	aine_boite.style.color ="red";
	cadet_boite.style.color ="green"; 
}
function f2()
{	
	var enfant = document.querySelectorAll('p')[1];
	// deuxième paragraphe
	var parent = enfant.parentElement; 
	// DIV parent du deuxième paragraphe
	parent.style.background ="pink";
}

firstElementChild : appliquée à l'élément parent
lastElementChild : appliquée à l'élément parent
parentElement : appliquée à l'élément enfant

Insérer de nouveaux éléments

Rendu d'un document HTML dans un Iframe

Notez que le bouton de commande disparait après avoir été cliqué.

Le code HTML de ce document

<body>
     <h3>Insertion de nouveaux éléments du DOM</h3>
     <p>Premier paragraphe d'origine.
     <div style ="border : 1px solid green ;" >
		<p>Deuxième paragraphe d'origine.
        <p>Troisième paragraphe d'origine.
     </div>
     <p>Quatrième paragraphe d'origine. 
	 <br><button onclick ="f1()">Insérer de nouveaux éléments</button>
</body>

Le script

function f1()
{
	let page = document.body;
	let pneo = document.createElement('p');
	let texteneo = document.createTextNode('Nouveau texte');
	pneo.textContent = 'Texte du nouveau paragraphe';
	page.prepend(pneo);
	page.append(texteneo);
	
	let boite = document.querySelector('div'); 
	let pneo2 = document.createElement('p');
	pneo2.innerHTML = 'Nouveau paragraphe dans DIV' ; 
	boite.appendChild(pneo2); 
	document.querySelector('button').remove();
}

la méthode createElement() pour préciser le type de balise. Il faut une deuxième instruction pour affecter un contenu à ce nouvel élément.
la méthode createTextNode('texte') qui ne crée pas un noeud de type élément mais un simple texte.

Observez l'onglet 'éléments' de la console du navigateur.

Il faut ensuite insérer ces nouveaux éléments.

prepend() : appliquée à l'élément parent ; permet d'insérer avant le premier enfant du parent
append() : appliquée à l'élément parent ; permet d'insérer après le dernier enfant du parent
appendChild() : appliquée à l'élément parent ; permet d'ajouter un enfant à ce parent (en dernier)

Supprimer des noeuds

Rendu d'un document HTML dans un Iframe

Le code HTML

<body>
     <h3>Suppression  d'éléments du DOM</h3>
        <p>Premier paragraphe qui sera supprimé.
        <div style ="border : 1px solid green ;" >
            <p>Deuxième paragraphe qui est conservé.
            <p>Troisième paragraphe qui est conservé.
        </div>
        <p>Quatrième paragraphe qui est conservé.
		<br><button onclick ="f1()">Supprimer certains éléments</button>
		<p id ="dernier">Cinquième paragraphe qui sera supprimé. 
</body>

Le script

function f1()
{
	let page = document.body;
	let premier = document.querySelector('p');
	premier.remove();
	let dernier = document.getElementById('dernier');
	page.removeChild(dernier); 
	document.querySelector('button').remove();
}

élément.remove() : supprime l'élément précisé
parent.removeChild(élément) : supprime l'élément à partir de son parent

Cloner un élément existant

Plutôt que de créer un nouvel élément de toute pièce on peut cloner un élément existant.

Le rendu dans un Iframe

À chaque fois que vous cliquez sur le bouton de commande il y a clonage de la boite.

Affichez l'onglet "éléments" de la console du navigateur pour observer la modification du DOM.

Le code HTML et JS

...
<body>
<div id ="boite1" style ="background : yellow; height : 50px ; margin : 10px;">
	<p>Boite avec fond jaune et d'une hauteur de 50 pixels. </p>
</div>
<button>cloner cette boite</button>

Le script

document.querySelector('button').onclick = function()
{
	var original = document.getElementById("boite1"); 
	var page = document.body; 
	var clone = original.cloneNode(true); 
	page.appendChild(clone); 
}
...

Il faut utiliser la méthode cloneNode() puis appendChild().
La méthode cloneNode() crée une copie du noeud. Si l'argument est true Les enfants du noeud sont aussi copiés. Ainsi dans l'exemple il est copié non seulement le noeud DIV mais aussi le noeud P, enfant de DIV.
La méthode cible.appendChild(clone) insère le clone dans la clible (en dernier).

Déplacer des éléments

Le rendu

Après un clic sur le bouton de commande deux paragraphes ont été déplacés.

Le code HTML

<body>
	<h3>Déplacer certains éléments</h3>
	<p id ="p1">Premier paragraphe.
	<p id ="p2">Deuxième paragraphe.
	<p>Troisième paragraphe.
	<p id ="p4">Quatrième paragraphe.<br>
	<button>Déplacer deux paragraphes</button>
	<div style ="border : 1px solid green ; height : 50px ;"></div>
</body>

Notez que certains éléments P sont identifiés.

Le script

document.querySelector('button').onclick = function()
{
	let page = document.body;
	let p1 = document.getElementById('p1');
	let p2 = document.getElementById('p2');
	let p4 = document.getElementById('p4');

	//On déplace p1 juste avant p4 dans le DOM
	page.insertBefore(p1, p4);
	
	// on déplace p2 dans la boite DIV
	let boite =document.querySelector('div'); 
	boite.appendChild(p2); 
	// 
}

insertBefore()
appendChild()

Synthèse

Je vous propose en guise de synthèse deux documents HTML où le DOM initial est profondément modifié par le script.

Mise en forme du document via le script

Cliquez sur les deux boutons de commande et observez ...
La page est mise en forme et un image est insérée.

Le code HTML

<html><head>
</head>
...
<body>
	<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>
	<br><button>Mettre en forme la page</button>
	<br><button>Insérer une image dans la page</button>
...

Ni feuille de style interne, ni lien vers une feuille de style externe. Donc style par défaut.

Le script

var page = document.body;
	
document.querySelector('button').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(this); 
	// suppression bouton
}
document.querySelectorAll('button')[1].onclick = function() 
{
	var image =document.createElement('img');
	image.src ="../images/bikini.jpg";
	image.alt ="jolie fille en bikini";
	image.style.width ="300px";
	image.style.display ="block";
	image.style.margin ="10px auto";
	document.querySelector('section').appendChild(image); 
	page.removeChild(this); 
	//suppression bouton
}

La première fonction crée et insère un élément de type LINK.
La deuxième fonction crée et insère un élément de type IMG.
Chaque fonction supprime le bouton qui l'appelle d'où l'emploi du mot "this".

Un patchwork coquin

À chaque seconde : une nouvelle image est insérée.
Cliquez sur le bouton de commmande pour mettre fin à l'insertion automatique d'images.

Le code CSS, HTML & SVG du document

...
<style>
	div {position : relative ; margin : 20px auto;}
	img {position : absolute; width : 10%;}
	img:active {transform : scale(3) ; z-index : 100;}
...
<body>
	<div  id ="patchwork" style = "width : 100% ; height : 500px ; background : aqua ; ">	</div>
	<button onclick ="clearInterval(routine);this.remove();" >Mettre fin à la génération d'images</button>
	<h3><i>Cliquez sur une image pour l'agrandir et la mettre en premier plan !</i></h3>
...

Les images seront positionnées en absolu dans la boite DIV.
L'image cliquée est agrandie et passe au premier plan.
Si clic sur le bouton de commande : l'insertion de photos est stoppée et le bouton de commande est supprimé.

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 patchwork = document.querySelector("#patchwork");
	var image = document. createElement("img");
	var reel = Math.random() ;
	var entier = Math.ceil(reel*36) ; 
	switch(entier)
	{
		case 1 : image.src ="..//images/bikini.jpg" ; break;
		case 2 : image.src ="../images/bikini1.jpg" ; break;
		case 3 : image.src ="../Images/bikini2.jpg" ; break;
		case 4 : image.src ="../images/bikini3.jpg" ; break;
		...
		case 36: image.src ="../images/bikini34.jpg" ; break;
	} // fin switch 
	image.style.left = x; 
	image.style.top = y;
	patchwork.appendChild(image);
} // fin fonction ajout

var routine = setInterval(ajout,1000);

ajout()

de façon aléatoire on génère le "top" et le "left" de chaque nouvelle image
la source de cette nouvelle image est générée aussi de façon aléatoire
Il n'y a plus qu'à insérer cette nouvelle image dans le patchwork

Cette fonction est appelée chaque seconde via le timer setInterval()

Traduction

Tutoriel sur Javascript

JavaScript : les bases

Framework historique : jQuery

Framework de nouvelle génération : Vue.js

Node.js : JavaScript 'côté serveur'

Recherche dans ce tuto

L'auteur : Patrick Darcheville

Manipuler le DOM avec JavaScript - manipulations avancées

Se déplacer dans l'arborescence du DOM

Rendu d'un document HTML dans un Iframe

Le code HTML

Le script

Insérer de nouveaux éléments

Rendu d'un document HTML dans un Iframe

Le code HTML de ce document

Le script

Supprimer des noeuds

Rendu d'un document HTML dans un Iframe

Le code HTML

Le script

Cloner un élément existant

Le rendu dans un Iframe

Le code HTML et JS

Le script

Déplacer des éléments

Le rendu

Le code HTML

Le script

Synthèse

Mise en forme du document via le script

Le code HTML

Le script

Un patchwork coquin

Le code CSS, HTML & SVG du document

Le script