Comment sélectionner les éléments du DOM avec le Framework Dojo

Découvrez comment sélectionner un ou plusieurs éléments du DOM depuis le Framework Dojo.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment sélectionner les éléments du DOM avec le Framework Dojo

Bonjour à tous et bienvenu sur Développement Facile.

Ensemble on continue la série de cours dédiée au Framework Dojo et là vous allez apprendre à sélectionner les éléments du Dom, récupérer des balises div, des balises paragraphes, spams, image, les liens, etc. tout ce dont vous avez besoin pour agrémenter vos sites Internet.

Sélectionner un élément unique

Un rappel en JavaScript, la sélection d’un élément ce passe par getElementById, et la Framework Dojo, lui, propose une écriture raccourcie avec Dojo.byId, au lieu d’écrire document.getElementById, vous utilisez Dojo.ById, et Dojo.ById you.innerHTML la division sélectionnée qu’est-ce que ça fait ?
Ca va récupérer, ça va faire un getElementById, ça récupère l’élément, ça peut être une div, paragraphe avec un identifiant you, et ça va le remplir avec le texte, la division est sélectionnée. Dojo.style ça change le style CSS de la balise identifiée par you.

Sélectionner plusieurs éléments

Vous avez vu exactement la même chose dans les cours précédents avec jQuery, pas de gros changements entre Dojo et jQuery, vous n’allez pas être désorienté, il y a un peu la syntaxe qui change, mais c’est le même principe de fonctionnement. Vous avez les sélecteurs de base, #identifiant pour sélectionner un élément identifié par un identifiant Id, .classe ça sélectionne les éléments avec une classe définie, et balise ça sélectionne toutes les balises désignées, comme div, p, spam, a, img, input, etc.

Vous avez des sélecteurs hiérarchiques, il suffit de regarder, sélectionne tout élément B qui est descendant d’un élément A, A supérieur à B ça sélectionne tout élément B qui est un enfant direct d’un élément A, A+B ça sélectionne tout élément B immédiatement précédé de l’élément A, et A~B ça sélectionne tout élément B précédé d’un élément A.

Vous avez des pseudo-classes de sélection,
:empty ça va sélectionner les éléments vides, et ceux qui n’ont pas d’enfant,
:checked par exemple pour les formulaires, ça va récupérer les éléments cochés, pour les boutons radios, les cases à cocher,
:only-child ça va sélectionner le premier enfant, le seul enfant, pardon, only seul enfant,
:first-child le premier enfant, d’un div, d’une balise p, d’un paragraphe,
:last-child le dernier enfant,
:nth-child(n) ça sélectionne le énième enfant,
:nth-child(event) ça sélectionne les éléments enfants pairs,
:nth-child(odd) les éléments enfants impairs.

Exactement comme jQuery, si vous avez suivi les cours sur jQuery, c’est la même chose, il y a quelques particularités de syntaxes qui changent sinon c’est la même chose.

:nth-last-child ça désigne le nième élément enfant en partant du dernier élément,
:first-of-type ça représente le premier élément de ce type,
:last-of-type ça représente le dernier élément de ce type,
:nth-of-type(n) ça représente le nième élément de ce type, le troisième, le quatrième,
:nth-last-of-type(n) le nième élément de ce type, mais en partant du dernier élément.
Vous avez les sélecteurs d’attribut également, attr ça désigne l’élément qui comportent l’attribut attr indiqué, entre crochets vous mettez attr=valeur, ça permet de désigner un élément qui comporte l’attribut attr fournit avec la valeur indiquée, je vous donnerais un exemple peut être que ça ne vous parle pas, moi ça me parle parce que je connais Dojo, il y aura un exemple de code source à la fin de ce cours vidéo, avec le ~= ça va chercher tous les éléments avec l’attribut attr qui contiennent une liste de valeur, qui contient le mot valeur tout simplement.

Pipe= la barre verticale | qui contient une liste de valeurs séparées par des –,
Attr^= l’attribut attr commence avec le préfixe fourni par la valeur indiquée,
$= se termine par la valeur indiquée,
*= contient une instance de la valeur indiquée.

Votre plan d’actions !

Alors on va voir tout ça à travers un exemple de code source, ce sera beaucoup plus clair pour vous, donc on fait un get by Id, on va récupérer le bloc M2, et là il y a écrit module2, là, regardez, on met bloc sélectionner, ça correspond exactement au début du cours en changeant la couleur de background, et là on va sélectionner tous les éléments impairs de la liste à puces, il y a une liste à puce ici, 1, 3, 5, ils ont un background, et là on va sélectionner les éléments avec l’attribut name, la valeur comporte 10 regardez, 10. On fait un div, là ils ont un nom, et il comporte la valeur, c’est la valeur comporte 10.
Voilà, il n’y a rien de plus à dire sur le fonctionnement de Dojo qui est vraiment très simplifié, retrouvez un exemple de code source sous ce cours vidéo, si vous avez des questions, posez-les sous ce cours vidéo, et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple Dojo

Retrouvez le code source du cours.

Choisissez les prochains cours sur le Framework Dojo

Dites-moi dans les commentaires, les prochains cours que vous souhaitez sur le Framework Dojo.
Quelles fonctionnalités voulez-vous connaitre ?