Retour

Récupérez l'archive contenant les fichiers nécessaires aux exercices suivants et décompressez la dans votre espace de travail.

Cliquez sur le titre d'un exercice pour le découvrir.

Les fichiers créés au cours des différents exercices sont souvent réutilisés pour d'autres exercices ultérieurs. Veillez donc à toujours en avoir une version disponible.


Ici on commence les manipulations de l'arbre DOM.

Autres sélections de l'arbre DOM

Sélection par balise
La méthode getElementsByTagName sélectionne les éléments par rapport à un nom de balise. Le résultat est une liste, que nous pouvons considérer et manipuler comme un tableau non mutable, dont les éléments sont les éléments sélectionnés.
  1. Ouvrez le document décrit dans le fichier manipulation-dom.html et dans une ardoise testez le code suivant :
    var lesElements = document.getElementsByTagName("div");
    lesElements[0];
    lesElements[0].style.fontWeight = "bold";              
    Que constatez-vous ?
  2. En vous inspirant de ce code, réalisez une fonction tousVerts qui met en couleur vert tous les textes des éléments dont le nom de balise (sans les < et >) est passé en paramètre de cette fonction sous forme d'une chaîne de caractères.

    Testez la en passant tous les contenus des balises <em> puis <a> en vert.

  3. La méthode getElementsByTagName peut également s'appliquer à un objet élément (un nœud de l'arbre DOM), et non exclusivement sur l'objet document. Dans ce cas le résultat ne contient que les descendants de cet élément correspondant à la balise demandée.

    Rechargez le document web puis évaluez les expressions suivantes et constatez le résultat.

    var gr34 = document.getElementById("gr34");
    var lesElements = gr34.getElementsByTagName("em");
    lesElements[0].style.color = "blue";              
  4. Modifiez la fonction précédente pour qu'elle prenne en second paramètre un nœud de l'arbre DOM qui sert de racine pour l'appel à getElementsByTagName.
  5. Faites-en sorte que si seul le premier paramètre est fourni lors de l'appel, on retrouve le comportement de la fonction initiale, c'est-à-dire que l'on considère tout le document lors de la sélection des éléments.
Sélection multiple et événements, this
Dans les fonctions listener this est une variable toujours définie. this fait référence à l'objet qui a été la cible de l'événement. C'est-à-dire celui sur lequel s'est produit l'événement qui est à l'origine de l'appel de la fonction listener.
Donc si l'on a mis en place l'abonnement suivant :
                        var gr34 = document.getElementById("gr34");
                                           // on crée l'abonnement sur l'élément gr34 de la fonction "changeColorToRed" pour l'événement "click"
                        gr34.addEventListener("click",changeColorToRed);							
avec la fonction changeColorToRed définie ainsi :
						var changeColorToRed = function() {
							this.style.color = "red";
						}
Alors un clic sur l'élément gr34 déclenche la fonction listener changeColorToRed et lors de son exécution la variable this représente l'élément gr34 puisque c'est lui qui a subi l'événement (le clic). Il en est la cible. Donc l'instruction this.style.color = "red" a pour effet de modifier la propriété CSS color de this c'est-à-dire la cible de l'événement c'est-à-dire dans ce cas l'élément gr34.
Cette même fonction (changeColorToRed) pourrait être abonnée à plusieurs éléments différents, à chaque fois son exécution ne concernera que l'élément cible de l'événement, c'est-à-dire le this à ce moment là.
On reprend le fichier manipulation-dom.html.
  1. Faites le nécessaire pour qu'un survol à la souris (mouseover) de n'importe lequel des éléments de type <img> ait pour conséquence de remplacer la source (src) de cette image survolée (et uniquement elle) par l'image images/intrus.jpg.
    Il est donc nécessaire de mettre en place un abonnement sur toutes les images de la page. La manière dont vous gérez cette mise en place ne doit pas dépendre du nombre d'images dans la page, c'est-à-dire que si l'on ajoute une image au document HTML, on ne doit pas avoir à modifier le code javascript pour conserver le même comportement pour toutes les images du document.
    Ce comportement doit être mis en place au chargement de la page.
  2. Complétez le comportement pour qu'après l'arrêt du survol d'une image (mouseover), la source initiale de l'image soit restaurée. Vous pourrez utiliser une variable globale pour mémoriser la source à restaurer.
Sélection par classe
La méthode getElementsByClassName fonctionne de manière similaire à getElementsByTagName. Elle sélectionne les éléments par rapport à une classe CSS.
  1. Toujours avec le fichier manipulation-dom.html, dans l'ardoise écrivez puis exécutez un code javascript qui ajoute à tous les éléments de la classe droite une propriété padding avec pour valeur 20px.
  2. Dans l'ardoise écrivez puis exécutez un code javascript qui ajoute à tous les éléments de la classe par descendants de l'élément d'id ajoncs une border de valeur solid 1px blue.
  3. Réalisez une fonction cache qui prend pour paramètre une chaîne de caractères représentant une classe CSS et qui a pour effet de masquer tous les éléments du document appartenant à cette classe.
    Utilisez display:none.
  4. Réalisez la fonction devoile qui effectue l'opération inverse en fixant à "" la propriété style.display des éléments sélectionnés ce qui a pour effet de leur rendre leur valeur par défaut (ce qui pourrait ne pas être la valeur définie par la feuille de style initiale...).
Sélection par sélecteur CSS
Dernier mode de sélection : à l'aide des sélecteurs CSS, les mêmes que ceux qui sont utilisés dans les règles CSS. La méthode querySelectorAll fournit la liste des éléments retenus par le sélecteur CSS fournit en paramètre.

Comme pour getElementsByTagName et getElementsByClassName, elle peut s'appliquer sur document ou sur un objet élément.

Les sélecteurs avec certaines pseudo-classes (:visited par exemple) ou pseudo-éléments (::first-letter par exemple) ne sont pas possibles.
  1. Quels sont les éléments de la page retenus par le sélecteur CSS div#ajoncs div.par ?
  2. Toujours avec le fichier manipulation-dom.html, évaluez les expressions suivantes et observez leur effet :
    var lesElements = document.querySelectorAll("div#ajoncs div.par");
    lesElements.length;
    lesElements[1].style.backgroundColor = "rgba(0,128,0,0.5)";
    1. Donnez un énoncé décrivant l'action du sélecteur CSS div.par p:nth-of-type(1) ?
    2. Quels sont les éléments de la page retenus par ce sélecteur ?
    3. Écrivez et testez un code javascript qui met en gras tous les éléments retenus par ce sélecteur.
  3. La méthode querySelector fonctionne de manière similaire à querySelectorAll mais elle ne fournit comme résultat que le premier élément sélectionné par le sélecteur CSS (donc le premier élément de la liste qu'aurait produite querySelectorAll). Testez :
    var lesElements = document.querySelectorAll("div.par img.droite");
    lesElements.length;
    var premiere = document.querySelector("div.par img.droite");
    premiere.style.width = "50%";
Breaking Bad, le retour
Dans cet exercice nous allons reprendre la table périodique des éléments travaillée dans un exercice CSS et ajouter au document des interactions à l'aide de code javascript. Cet exercice sera l'occasion de mettre en Œuvre des sélections par balise, par classe ou par sélecteur CSS.
  1. Ouvrez dans votre navigateur le fichier tablePeriodique-travail.html fourni et repérez dans son code source l'élément d'id focus. Vous pouvez également étudier les règles CSS qui s'appliquent sur cet élément dans la feuille de style utilisée. Repérez également les blocs d'id displayFocus et d'id checkOptions et étudiez leurs codes source.
    Les éléments input de type checkbox correspondent à des cases à cocher. Dans le navigateur, ces cases apparaissent cochées si dans le code HTML l'attribut checked est présent, et il doit avoir pour valeur "checked" pour une validation XHTML. Si l'attribut est absent la case est décochée. En javascript les objets éléments associés disposent donc d'une propriété checked dont la valeur est un booléen. La case est cochée quand ce booléen vaut true et décochée quand il vaut false.
  2. La première interaction ajoutée va consister à faire en sorte qu'un survol à la souris d'un des éléments chimiques provoque son affichage (c.-à-d. de toutes ses informations) dans l'élément d'id focus. L'élément reste affiché tant qu'il n'est pas remplacé par un autre.

    Utilisez getElementsByClassName pour sélectionner tous les éléments (HTML) de classe elementChimique puis les abonner à une fonction d'écoute qui aura pour effet de copier dans l'élément d'id focus le contenu de l'élément survolé par la souris. Pour conserver les propriétés visuelles, les classes CSS qui s'applique à l'élément survolé devront également être appliquées à l'élément d'id focus.

    Testez votre code.

  3. On souhaite qu'initialement le contenu de l'élément d'id focus soit celui du premier élément chimique.
    1. Quel sélecteur permet d'obtenir les éléments <div> de classe elementChimique situées dans un élément <div> de classe ligne ?
    2. Utilisez la fonction querySelector pour sélectionner le premier des éléments retenus par le sélecteur de la question précédente et afficher son contenu dans l'élément d'id focus. Vous devriez pouvoir vous inspirer, ou mieux réutiliser, la fonction d'écoute écrite à la question précédente.

      Comment faire pour que cette action soit réalisée au chargement du document ?

  4. On va maintenant intervenir sur la case à cocher d'id checkFocus.
    1. Quelle propriété CSS, et avec quelles valeurs, peut être utilisée pour afficher ou masquer un élément dans un document web ?
    2. Un événement change est déclenché lorsque la valeur d'une case à cocher est modifiée. Réalisez une fonction qui, selon la valeur de l'attribut checked de l'élément d'id checkFocus, a pour effet d'afficher ou de masquer l'élément d'id focus et mettant en place le mécanisme événementiel pour déclencher cette fonction pour chaque changement de valeur de la case à cocher d'id checkFocus.
  5. Intéressons-nous aux cases à cocher du bloc d'id checkOptions. Nous allons commencer par nous intéresser à la case d'id checkMasse qui concerne la masse atomique des éléments chimiques. On souhaite que les masses atomiques des éléments, autres que celui d'id focus, soient affichées si cette case est cochée et masquées sinon.
    1. Quel sélecteur CSS permet de sélectionner tous les éléments <div> de classe masseatomique situées dans un élément <div> de classe ligne ?
    2. Utilisez la fonction querySelectorAll pour réaliser une fonction displayMasse qui, selon la valeur de l'attribut checked de l'élément d'id checkMasse, a pour effet d'afficher ou de masquer la masse atomique de tous les éléments chimiques de la page autre que celui d'id focus.
    3. Abonnez cette fonction à l'événement change pour l'élément d'id checkMasse et testez votre solution.
  6. Faites de même pour gérer l'affichage des couches d'électrons ou l'électronégativité des éléments chimiques via les cases à cocher correspondantes.

    On peut certainement remarquer une forte ressemblance entre les code des différentes fonctions qui gèrent les affichages des différentes propriétés. Faites une proposition qui évite les répétitions de code entre les trois fonctions d'affichage.

  7. Que constate-t-on dans l'affichage des propriétés au sein de l'élément #focus si certaines des ces trois cases sont décochées au moment du survol à la souris d'un élément chimique ?

    Pourquoi certains éléments se retrouvent-ils masqués ?

    Modifiez la fonction qui permet l'affichage dans l'élément #focus pour qu'elle change la valeur de la propriété display de tous les éléments emboités dans #focus afin de les rendre visibles.

  8. Il nous reste à agir sur les élément d'id tous et aucun. On souhaite qu'un clic sur le premier ait pour effet de cocher toutes les cases du bloc d'id checkOptions et de toutes les décocher par un clic.
    1. Donnez deux manières permettant de sélectionner tous les éléments cases à cocher du bloc d'id checkOptions (il ne faut donc pas sélectionner la case d'id checkFocus).
    2. Sachant que l'on peut simuler un clic sur une case à cocher en appelant la fonction click() sur ll'objet élément correspondant, mettez en place les abonnements qui permettent de réaliser les opérations souhaitées sur les éléments #tous et #aucun.
      Modifier par du code la valeur de la propriété checked d'un objet élément de type checkbox ne déclenche pas d'événement cange. Pour déclencher un tel événement par du code il faut simuler le clic par un appel à la fonction click().