Médiaforma

All posts tagged dom

Certains éléments du DOM génèrent des événements. Je les ai rassemblés dans ce tableau :

Méthode Événement géré
focus() Réception de focus par l’élément
blur() Perte de focus par l’élément
focusin() Réception de focus par l’élément ou un de ses enfants
focusout() Perte de focus par l’élément ou un de ses enfants
resize() Redimensionnement d’un élément
change() Modification d’un élément

 

A titre d’exemple, ce code utilise l’événement blur() pour tester la validité d’une zone de texte dans un formulaire.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test de la validité d'une zone de texte</title>

  </head>
  <body>
    <script src="jquery.js"></script>
    <table>
    <tr><td>Entrez un nombre compris entre 10 et 20</td><td><input type="text" id="saisie1" autofocus></td></tr>
    <tr><td>Entrez un texte</td><td><input type="text" id="saisie2"></td></tr>
    </table>
    <span id="message"></span>
    <script>
      $(function() {
        $('#saisie1').blur(function(){
          var zone1 = parseInt($('#saisie1').val());
          if ((zone1>=10) && (zone1<=20))
            $('#message').html('La valeur dans la première zone de texte entrée est valide');
          else
            $('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');
        });
      });
    </script>
  </body>
</html>

 

Lorsque la première zone de texte perd le focus :

$('#saisie1').blur(function(){

 

Le contenu de la zone de texte est lu et mémorisé sous une forme entière (parseInt()) dans la variable zone1 :

var zone1 = parseInt($('#saisie1').val());

 

Si la valeur saisie est dans la fourchette autorisée, un message est affiché dans le span #message :

if ((zone1>=10) && (zone1<=20))
  $('#message').html('La valeur dans la première zone de texte entrée est valide');

 

Dans le cas contraire, un autre message est affiché dans le span #message :

else
  $('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');

 

Exercice

Affichez la taille de la fenêtre suite à son redimensionnement

Note : L’élément window représente la fenêtre.

 

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille de la fenêtre au redimensionnement</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <span id="message">Redimensionnez la fenêtre</span>
    <script>
      $(function() {
        $(window).resize(function(){
          var x = $(window).width();
          var y = $(window).height();
          $('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');
        });
      });
    </script>
  </body>
</html>

 

Au redimensionnement de la fenêtre :

$(window).resize(function(){

Les nouvelles dimensions de la fenêtre sont stockées dans les variables x et y :

var x = $(window).width();
var y = $(window).height();

Puis affichées dans le span d’id #message :

$('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');

 

Remarque

Quelques autres événements sont dignes d’intérêt :

  • $(élément).load() est levé quand l’élément est entièrement chargé où élément peut être la page (window) ou un élément auquel est associé une URL (img, script, frame ou iframe).

  • $(window).unload() est levé quand l’utilisateur demande à changer de page


Vous appliquerez la méthode remove() aux éléments jQuery à supprimer.

Saisissez le code suivant dans Notepad++ et enregistrez-le sous le nom supprimer-contenu.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion de contenu dans le DOM</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Partie 1</h2>
    <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    <ul>
      <li>un
      <li>deux
      <li>trois
      <li>quatre
    </ul>
    <hr>
    <h2>Partie 2</h2>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <ul>
      <li>premier
      <li>deuxième
      <li>troisième
    </ul>
    <hr>
    <script>
      $(function() {
        $('p').remove();
      });
    </script>
  </body>
</html>

 

Exercice : Insérez le code nécessaire pour supprimer tous les paragraphes (<p>).

Solution :

$('p').remove();

 

Exercice : Supprimer le deuxième enfant <li> des balises <ul>

Solution :

$('li:nth-child(2)').remove();

Quatre méthodes permettent d’insérer un élément (el) avant ou après l’élément ciblé (cible) :

  • el.appendTo(cible) insère un élément à la fin de la cible
  • el.prependTo(cible) insère un élément au début de la cible
  • el.insertBefore(cible) insère un élément avant la cible
  • el.insertAfter(cible) insère un élément après la cible

Saisissez ce code dans Notepad++ et sauvegardez-le sous le nom inserer-elements.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion d'éléments</title>
    <script src="jquery.js"></script>
  </head>
  <body>
<h2>Titre</h2>
  <div class="parent">
    <div>Bonjour</div>
    <div>jQuery</div>
  </div>
  <script>
      $(function() {
        //$('<p>Comment ça va ?</p>').appendTo('.enfant');
      });
    </script>
  </body>
</html>

 

Exécutez ce code dans Firefox. Supprimez les commentaires et ré exécutez ce code. Voici le résultat :

 

Expérimentez les méthodes prependTo(), insertBefore() et insertAfter() pour comprendre leurs différences.

Si vous ne voyez pas la différence entre appendTo() et insertAfter(), ou entre prependTo() et insertBefore(), utilisez Firebug pour visionner le code généré. Pour cela, appuyez sur la touche F12, sélectionnez l’onglet HTML et développez les balises <body> puis <div> :

 


Commencez par saisir ce code et sauvegardez-le sous le nom remplacer-contenu.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion de contenu dans le DOM</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Partie 1</h2>
    <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    <ul>
      <li>un
      <li>deux
      <li>trois
      <li>quatre
    </ul>
    <hr>
    <h2>Partie 2</h2>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <ul>
      <li>premier
      <li>deuxième
      <li>troisième
    </ul>
    <hr>
    <script>
      $(function() {
      });
    </script>
  </body>
</html>

 

Vous utiliserez la méthode replaceWith() pour remplacer la sélection.

Par exemple, pour remplacer tous les éléments hr par des éléments br, vous utiliserez cette instruction :

$('hr').replaceWith('<br>');

 

Exercice : remplacez tous les paragraphes par le texte “Ceci est un paragraphe”.

Solution :

$('p').replaceWith('Ceci est un paragraphe');

 

Exercice : remplacer les listes ul par des listes ol

Si vous avez songé à cette instruction :

$('ul').replaceWith('ol');

 

Le résultat est loin de ce qui était attendu :

 

Pour comprendre ce qui s’est passé, utilisez Firebug.

Appuyez sur F12, sélectionnez l’onglet HTML et développez l’élément body :

 

Les éléments ul ont été remplacés par des éléments ol et les enfants li ont été supprimés.

Il va donc falloir utiliser une autre méthode. Vous allez parcourir chacun des éléments ul avec la méthode each() et les remplacer par une balise <ol> suivie du contenu de l’élément ol et de la balise </ol> :

$('ul').each(function(){
  var dum=$(this);
  dum.replaceWith('<ol>'+dum.html()+'</ol>');
});

 

Voici le résultat :

 

Voyons si vous avez compris. Ajoutez quelques instructions jQuery pour remplacer tous les titres h2 de la page par des titres h1.

Voici la solution :

$('h2').each(function(){
  var dum=$(this);
  dum.replaceWith('<h1>'+dum.html()+'</h1>');
});

Commencez par saisir ce code et sauvegardez-le sous le nom inserer-contenu.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion de contenu dans le DOM</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Partie 1</h2>
    <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    <p>Accedat huc suavitas quaedam oportet sermonum atque morum, haudquaquam mediocre condimentum amicitiae. Tristitia autem et in omni re severitas habet illa quidem gravitatem, sed amicitia remissior esse debet et liberior et dulcior et ad omnem comitatem facilitatemque proclivior.</p>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <h2>Partie 2</h2>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p>

    <script>
    </script>
  </body>
</html>

 

Remarque

Le texte des paragraphes est issu du site http://www.faux-texte.com/.

 

Pour altérer le contenu d’un objet texte jQuery, vous utiliserez la méthode text(). Par exemple, pour modifier tous les titres h2 d’un document en “Ceci est un titre h2”, vous utiliserez cette instruction :

$('h2').text('Ceci est un titre h2');

 

Faites un essai dans ce document :

 

Vous pouvez également insérer du contenu avant ou après un objet jQuery en utilisant les méthodes suivantes :

  • append() insère du contenu à la fin de la sélection
  • prepend() insère du contenu au début de la sélection
  • before() insère du contenu avant la sélection
  • after() insère du contenu après la sélection

 

Exercice : Ajoutez un signe supérieur à et un espace avant chaque titre h2

Solution :

$('h2').prepend('> ');

 

Exercice : Remplacez successivement prepend par append, before et after pour mettre en évidence les différences de ces méthodes

 

Exercice : Insérez un trait horizontal après chaque paragraphe

Solution :

$('p').append('<hr>');

Pour convertir un élément du DOM en un objet jQuery, il suffit de le requêter comme ceci :

$('br') // Ceci est un objet jQuery

 

Il est alors possible d’appliquer les méthodes jQuery à cet objet.

Il est également possible de convertir une variable JavaScript en un objet jQuery en l’encapsulant avec l’alias $ :

var texte = "ceci est un texte";
var texteJQ=$(texte); // Ceci est un objet jQuery

 

Inversement, pour convertir un objet jQuery en un tableau JavaScript, vous utiliserez la méthode get() :

var paragraphes = $('p').get(); // Création du tableau JavaScript paragraphes

 

Pour accéder aux éléments du tableau, vous utiliserez ces instructions :

var element1 = paragraphes[0].innerHTML;
var elementN = paragraphes[N-1].innerHTML;

Pour sélectionner des éléments dans le DOM, il suffit de les préciser, entre apostrophes, dans les paramètres de la fonction jQuery :

$('sélecteur')

 

Le tableau suivant rassemble quelques sélecteurs qu’il faut connaître.

Sélecteur Effet
div Un nom de balise, sans les caractères < et >, permet de sélectionner cette balise. Si plusieurs balises de même nom se trouvent dans le document, toutes ces balises sont sélectionnées. Par exemple, si le document contient plusieurs balises <div>, le sélecteur CSS div sélectionne toutes ces balises.
#premier Le signe # fait référence à l’attribut id (ou identifiant) d’une balise. Par exemple, si vous définissez la balise <p id=”premier”>, le sélecteur #premier sélectionne cette balise. Notez que deux balises ne peuvent pas avoir le même identifiant.
.rouge Le point fait référence à l’attribut class d’une balise. Supposons que vous ayez défini la balise <h2 >. Le sélecteur .rouge sélectionne cette balise. Plusieurs balises peuvent avoir la même classe. Un même traitement pourra donc être appliqué à ces deux balises. Pour différencier les balises <h2> de classe rouge des balises <p> de classe rouge, vous utiliserez les sélecteurs h2.rouge et p.rouge. Ce cas particulier s’applique à toutes les balises et toutes les classes. Ainsi, le sélecteur nom_balise.nom_classe permet de sélectionner les balises nom_balise de classe nom_classe.
ul li Supposons maintenant que vous ayez défini une liste à puces <ul></ul> et une liste numérotée <ol></ol>. Chacun des éléments des deux listes est repéré par des balises <li>. Pour différencier les éléments <li> de la liste à puces des éléments <li> de la liste numérotée, vous utiliserez un « sélecteur descendant ». Ainsi, le sélecteur ul li s’adresse à tous les éléments <li> de la liste à puces <ul>, et le sélecteur ol li s’adresse à tous les éléments <li> de la liste numérotée <ol>.
[src] Certaines balises HTML peuvent contenir un ou plusieurs attributs. Par exemple, la balise <img src=”chien.jpg” width=”40″ height=”30″> contient trois attributs : src, width et height. Pour sélectionner toutes les balises qui contiennent un attribut src, vous utiliserez le sélecteur [src].
[width=”40″] Vous pouvez même aller plus loin en sélectionnant les balises dont un attribut a une certaine valeur. Par exemple, pour sélectionner toutes les balises dont l’attribut width a pour valeur 40, vous utiliserez le sélecteur [width=”40″].
* Le caractère * représente toutes les balises du document.

 

Tapez le code suivant et sauvegardez-le sous le nom selections.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <ul>
      <li>Liste à puces 1 : élément 1</li>
      <li>Liste à puces 1 : élément 2</li>
      <li>Liste à puces 1 : élément 3</li>
    </ul>
    <div>
      <ul>
        <li>Liste à puces 2 : élément 1</li>
        <li>Liste à puces 2 : élément 2</li>
        <li>Liste à puces 2 : élément 3</li>
      </ul>
    </div>
    <ol>
      <li>Liste numérotée : élément 1</li>
      <li>Liste numérotée : élément 2</li>
      <li>Liste numérotée : élément 3</li>
    </ol>
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
      });
      </script>
  </body>
</html>

 

Exercice

Pour l’instant, admettez que l’instruction suivante affecte un arrière-plan de couleur jaune à un élément HTML quelconque :

css(‘background-color’,’yellow’);

Ajoutez les sélecteurs nécessaires pour affecter la couleur d’arrière-plan yellow :

  1. à toutes les balises <ul>
  2. aux balises ul de classe vert
  3. aux balises <ul> contenues dans une balise <div>
  4. aux balises <li> contenues dans une balise <ul> contenues dans une balise <div> et dont l’attribut class vaut impair
  5. aux balises <li> contenues dans une balise <ol>
  6. aux balises <li> qui possèdent un attribut class

Solution

  1. $('ul').css('background-color','yellow');
  2. $('ul.vert').css('background-color','yellow');
  3. $('div ul').css('background-color','yellow');
  4. $('div ul li[class="impair"]').css('background-color','yellow');
  5. $('ol li').css('background-color','yellow');
  6. $('li[class]').css('background-color','yellow');