Jquery et le DOM

Vous savez que l'interactivité repose sur la modification du DOM :

ajouter/modifier des attributs : méthode attr()
modifier les dimensions d'un élément : méthodes width(), height()
ajouter/modifier des propriétés CSS : méthode css()
ajouter/retirer des classes : méthodes addClass(), removeClass(), toggleClass()
remplacer le contenu des balises : méthode html() ou text()

compléter le contenu d'un noeud : insérer du texte avant/après le contenu actuel
se déplacer dans le DOM
rajouter des noeuds
supprimer des noeuds

Ce sont ces différents points qui seront évoqués dans ce chapitre.

Compléter le contenu d'un noeud

Vous savez déjà remplacer le contenu d'un noeud ; il suffit d'utiliser les méthodes text() et html() déjà évoquées.
Je rappelle qu'avec la méthode html() l'argument de la méthode peut comprendre des balises HTML.

Maintenant si vous voulez insérer du texte avant ou après le contenu actuel il faut utiliser d'autres méthodes.
Introduisons ces méthodes avec un exemple !
En cliquant sur un bouton de commande du texte est ajouté avant et après le contenu actuel des titres H1 et H2.

Le code HTML de l'exemple

	<h1>1 - Titre général de la page</h1>
	<p>Corps de texte associé.
	<br>Blabla ... 
	<h2>1 - Premier sous titre</h2>
	<p>Corps de texte associé.
	<br>Blabla ... 
	<h2>2 - Deuxième sous titre</h3>
	<p>Corps de texte associé.
	<br>Blabla ... 

	<button>Précisez le niveau hiérarchique des titres</button>

Le script de l'exemple

	$("button").click(function() 
	{
		$("h1").prepend("Chapitre ").append("↓");
		$("h2").prepend("Section ").append("↓");
	}
	);

Commentaire

Pour les titres de niveau 1 et 2 emploi des méthodes prepend() (ajout de contenu en début) et append() (ajout de contenu à la fin). Notez qu'à la fin on ajoute une flèche (orientée vers le bas) grâce à une entité de caractère.

Le rendu de ce code dans un cadre :

Se déplacer dans le DOM avec Jquery

Autant en JS traditionnel le déplacement à l'intérieur du DOM du document est délicat. Autant c'est d'une facilité déconcertante avec JQuery. Je présente avec un exemple les principales méthodes pour se "promener" dans le DOM.

Le code CSS et HTML de l'exemple (extraits)

<style>                     
	table {width :80% ; }
	div {border :1px solid red;}
...
<body>
	...
	<table>
	<tr><th>col 1</th><th>col 2</th><th>col 3</th></tr>
	<tr><td >5</td><td>fois 1</td><td>donne 5</td></tr>
	<tr><td >5</td><td >fois 2</td><td >donne 10</td></tr>
	<tr><td >5</td><td >fois 3</td><td >donne 15</td></tr>
	<tr><td >5</td><td >fois 4</td><td >donne 20</td></tr>
	<tr><td >5</td><td >fois 5</td><td >donne 25</td></tr>
</table>
<ul>Liste à puces : 
<li>item 1<li>item 2<li>item 3<li>item 4<li>item 5
</ul>

<ol>Liste numérotée :
<li>item 1<li>item 2<li>item 3<li>item 4<li>item 5
</ol>
<div>
	<p>Premier paragraphe de la boîte
	<p>Deuxième paragraphe de la boîte
	<p>Troisième paragraphe de la boîte
</div>
<button>Mettre en gras le texte des balises P</button>

Un tableau, une liste à puces, une liste numérotée, une boîte avec trois paragraphes, un bouton de commande.

Le script de l'exemple

	$("td").mouseover(function() 
		{$(this).next().css("background","green");$(this).prev().css("background","red");});
	$("td").mouseout(function() 
		{$(this).next().css("background","");$(this).prev().css("background","");});
	
	$("li").click(function() 
		{$(this).prevAll().css("color","red");$(this).nextAll().css("color","green");});
	$("li").mouseover(function() 
		{$(this).prevAll().css("color","");$(this).nextAll().css("color","");});
		
	$("ol,ul").click(function() 
		{$(this).children().css("fontWeight","bold");});
	$("ol,ul").mouseout(function() 
		{$(this).children().css("fontWeight","");});
	
	$("div p ").click(function() 
		{$(this).parent().css("background","purple");});
	$("div p ").mouseout(function() 
		{$(this).parent().css("background","");});
	
	$("button:eq(0)").click(function() 
		{$("body").find("p").css("fontWeight","bold");});

la méthode prev() appliquée à une cellule de tableau cible la cellule à sa gauche de la même ligne
la méthode next() appliquée à une cellule de tableau cible la cellule à sa droite de la même ligne
la méthode prevAll() appliquée à un item de liste cible les items au dessus de l'item sélectionné
la méthode nextAll() appliquée à un item de liste cible les items en dessous de l'item sélectionné
la méthode children() appliquée à OL ou UL cible tous les items de la liste
la méthode parent() appliquée à une balise P contenue dans un DIV cible ce DIV
la méthdoe find() argumentée avec P et précédée de $("body") cible toutes les balises P de la page

Le rendu de ce code dans un cadre :

Ajouter / supprimer des noeuds

Au travers d'un nouvel exemple je vais maintenant vous montrer qu'il est facile avec jQuery d'ajouter ou de supprimer des éléments dans la page.

Le code HTML de l'exemple (extraits)

...
<ul>Liste à puces : 
	<li>item 1
	<li>item 2
	<li>item 3
	<li>item 4
	<li>item 5
</ul>
<ol>Liste numérotée :
	<li>item 1
	<li>item 2
	<li>item 3
	<li>item 4
	<li>item 5
</ol>
<div>
	<p>Premier paragraphe de la boîte
	<p>Deuxième paragraphe de la boîte
	<p>Troisième paragraphe de la boîte
</div>
<button>Ajouter un item en fin de liste numérotée !</button>
<button>Ajouter un item en début de liste à puces !</button>
<button>Supprimer les paragraphes de la boîte rose !</button>
<button>Supprimer la liste à puces !</button>
<button>Supprimer la liste numérotée !</button>

La page contient une liste à puces, une liste numérotée, une boîte contenant trois paragraphes, cinq boutons de commande.

Le script

	$("button:eq(0)").click(function() 
		{$("<li>item - fin</li>").insertAfter($('ol li:last'));});
	$("button:eq(1)").click(function() 
		{$("<li>item - début</li>").insertBefore($('ul li:first'));});
	$("button:eq(2)").click(function() {$("div p").remove() ; });
	$("button:eq(3)").click(function() {$("ul").empty() ; });
	$("button:eq(4)").click(function() {$("ol").empty() ; });

première instruction : utilisation de la méthode insertAfter() qui permet d'ajouter un item en fin de liste ; ajout du code HTML :<li>item - fin</li>
deuxième instruction : utilisation de la méthode insertBefore() qui permet d'ajouter un item en début de liste ; ajout du code HTML : <li>item - début</li>
troisième instruction : utilisation de la méthode remove() pour supprimer les balises P contenue dans la boîte DIV
quatrième instruction : utilisation de la méthode empty() qui supprime tous les "enfants" de l'élément ciblé(UL) donc suppression des "li" correspondants
cinquième instruction : toujours utilisation de la méthode empty() pour supprimer tous les items de la liste numérotée

Notez bien la syntaxe pour les méthodes insertAfter et insertBefore :
$("code HTML ajouté").insertAfter/insertBefore($("point d'insertion"))
Notez que les méthodes remove() et empty() n'ont pas besoin d'arguments.

Testez ce code

Ajoutez des items aux listes puis supprimez ces dernières et d'autres éléments de la page.
Pour testez le code n'hésitez pas à recharger la page afin qu'elle retrouve son état initial.

Le rendu du code :

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Jquery et le DOM

Compléter le contenu d'un noeud

Le code HTML de l'exemple

Le script de l'exemple

Commentaire

Se déplacer dans le DOM avec Jquery

Le code CSS et HTML de l'exemple (extraits)

Le script de l'exemple

Ajouter / supprimer des noeuds

Le code HTML de l'exemple (extraits)

Le script

Testez ce code