ofppt 5 - Manipuler JQUERY
5 - Manipuler JQUERY
5 - Manipuler JQUERY
Comprendre l’arbre DOM
Arbre DOM
Lorsqu'une page Web est chargée, le navigateur crée un Document Objet Modèle de la page.
Le modèle HTML DOM est construit comme un arbre d' Objets :
Avec le modèle objet, JavaScript obtient toute la puissance dont il a besoin pour créer du HTML dynamique :
JavaScript peut modi er tous les éléments HTML de la page
JavaScript peut modi er tous les attributs HTML de la page
JavaScript peut changer tous les styles CSS de la page
JavaScript peut supprimer les éléments et attributs HTML existants
JavaScript peut ajouter de nouveaux éléments et attributs HTML
JavaScript peut réagir à tous les événements HTML existants dans la page
JavaScript peut créer de nouveaux événements HTML dans la page
Le DOM HTML est un modèle objet standard et une interface de programmation pour HTML. Il dé nit :
Les éléments HTML comme objets
Les propriétés de tous les éléments HTML
Les méthodes pour accéder à tous les éléments HTML
Les événements pour tous les éléments HTML
En d'autres termes : le DOM HTML est une norme sur la façon d'obtenir, de modi er, d'ajouter ou de supprimer des éléments HTML
Objet Document
L'objet document représente votre page Web. Si vous souhaitez accéder à n'importe quel élément d'une page HTML, vous commencez toujours
par accéder à l'objet document.
Vous trouverez ci-dessous quelques exemples d'utilisation de l'objet document pour accéder au HTML et le manipuler.
Recherche d'éléments HTML
Method Description
Trouver un élément
document.getElementById(id)
par élément ID
Trouver des éléments
document.getElementsByTagName(name)
par nom de balise
document.getElementsByClassName(name) Trouver des éléments
DRIF - Secteur Digital & IA
Page 1 / 11
ofppt 5 - Manipuler JQUERY
par nom de classe
Modi cation des éléments HTML
Propriété Description
element.innerHTML = new Changerla valeur de
html content l'innerHTML
element.attribute = new Changer l'attribut d'un
value élément
element.style.property =
Changer le style d'un élément
new style
Ajout et suppression d'éléments
Method Description
Créer un élément
document.createElement(element)
HTML
Supprimer un élément
document.removeChild(element)
HTML
Ajouter un élément
document.appendChild(element)
HTML enfant
Remplacer un élément
document.replaceChild(new, old)
HTML
Ecrire dans un
document.write(text)
docment HTML
Ajout de gestionnaire d'évènement
Méthode Description
document.getElementById(id).onclick =
Ajouter un événement de clic
function(){code}
Présentation Jquery
Comprendre Javascript en quelques minutes avec cette vidéo explicative.
Durée de la vidéo : 1"34 minutes.
DRIF - Secteur Digital & IA
Page 2 / 11
ofppt 5 - Manipuler JQUERY
C'est parti !
Microsoft Stream
To see this content, sign in
New to Microsoft Stream? sign up
Relations de noeuds
Les nœuds de l'arborescence des nœuds ont une relation hiérarchique les uns avec les autres.
Présentation générale
Les termes parent, enfant et frère sont utilisés pour décrire les relations.
Dans une arborescence de nœuds, le nœud supérieur est appelé racine (ou nœud racine)
Chaque nœud a exactement un parent, sauf la racine (qui n'a pas de parent)
Un nœud peut avoir plusieurs enfants
Les frères et sœurs (frères ou sœurs) sont des nœuds avec le même parent
Navigation entre les noeuds
1 - Descendre dans l'arborescence DOM : Il existe 6 différentes manières JavaScript de déplacer et d'obtenir des nœuds enfants
rstChild- Retourne le premier enfant de l'élément
rstElementChild - Retourne le premier élément enfant du parent
lastChild- Retourne le dernier enfant de l'élément
lastElementChild - Retourne le premier élément enfant du parent
childNodes - Renvoie tous les enfants de l'élément sous la forme d'une collection de tableaux
children - Renvoie tous les enfants qui sont des éléments sous la forme d'une collection de tableaux
DRIF - Secteur Digital & IA
Page 3 / 11
ofppt 5 - Manipuler JQUERY
2 - Remonter dans l'arborescence DOM : Il existe 2 manières JavaScript différentes de déplacer et d'accéder aux nœuds parents
parentNode - Renvoie le nœud parent de l'élément
parentElement - Renvoie le nœud de l'élément parent de l'élément
3 - Déplacer latéralement dans l'arborescence : il existe 4 façons différentes de se déplacer et d'accéder aux nœuds frères en JavaScript
nextSibling - Renvoie le nœud frère qui est le prochain enfant de son parent
nextElementSibling - Renvoie l'élément frère qui est le prochain enfant de son parent
previousSibling - Renvoie le nœud frère qui est un enfant précédent de son parent
previousElementSibling - Renvoie l'élément frère qui est un enfant précédent de son parent
Tuto : Installation et syntaxe
Dans ce nouveau chapitre, découvrez comment maîtriser l'installation et la syntaxe.
Durée de la vidéo : 5"33 minutes.
C'est parti !
Connaître les bases de la manipulation DOM
Sélecteurs (simples, multiples...)
La méthode querySelector() renvoie le premier élément qui correspond à un ou plusieurs sélecteurs CSS spéci és dans le document.
Remarque : La méthode querySelector() ne renvoie que le premier élément qui correspond aux sélecteurs spéci és. Pour renvoyer toutes les
correspondances, utilisez plutôt la méthode querySelectorAll() .
Si le sélecteur correspond à un identi ant dans un document qui est utilisé plusieurs fois (notez qu'un "identi ant" doit être unique dans une
page et ne doit pas être utilisé plus d'une fois), il renvoie le premier élément correspondant.
Syntaxe :
Exemples
DRIF - Secteur Digital & IA
Page 4 / 11
ofppt 5 - Manipuler JQUERY
Obtenez le premier élément <p> dans le document :
document.querySelector("p");
Obtenez le premier élément <p> du document avec class="example" :
document.querySelector("p.example");
Changez le texte d'un élément avec id="demo" :
document.querySelector("#demo").innerHTML = "Hello World!";
Obtenez le premier élément <p> dans le document où le parent est un élément <div> :
document.querySelector("div > p");
Obtenez le premier élément <a> dans le document qui a un attribut "target" :
document.querySelector("a[target]");
Obtenez tous les éléments <p> du document et dé nissez la couleur d'arrière-plan du premier élément <p> (index 0) :
// Get all <p> elements in the document
var x = document.querySelectorAll("p");
// Set the background color of the first <p> element
x[0].style.backgroundColor = "red";
Modes d'accès aux éléments
La façon la plus simple d’accéder à un élément dans un document va être de la faire en le ciblant avec le sélecteur CSS qui lui est associé. Deux
méthodes nous permettent de faire cela : les méthodes querySelector() et querySelectorAll() qui sont des méthodes du mixin ParentNode et
qu’on va pouvoir implémenter à partir des interfaces Document et Element.
/*Sélectionne le premier paragraphe du document et change son texte avec la propriété textContent que
nous étudierons plus tard dans cette partie*/
document.querySelector('p').textContent = '1er paragraphe du document';
let documentDiv = document.querySelector('div'); //1er div du document
//Sélectionne le premier paragraphe du premier div du document et modifie son texte
documentDiv.querySelector('p').textContent = '1er paragraphe du premier div';
/*Sélectionne le premier paragraphe du document avec un attribut class='bleu' et change sa couleur en
bleu avec la propriété style que nous étudierons plus tard dans cette partie*/
document.querySelector('p.bleu').style.color = 'blue';
//Sélectionne tous les paragraphes du document
let documentParas = document.querySelectorAll('p');
//Sélectionne tous les paragraphes du premier div
let divParas = documentDiv.querySelectorAll('p');
/*On utilise forEach() sur notre objet NodeList documentParas pour rajouter du texte dans chaque
paragraphe de notre document*/
documentParas.forEach(function(nom, index){
nom.textContent += ' (paragraphe n°:' + index + ')';
});
Accéder à un élément en fonction de la valeur de son attribut id
DRIF - Secteur Digital & IA
Page 5 / 11
ofppt 5 - Manipuler JQUERY
La méthode getElementById() est un méthode du mixin NonElementParentNode et qu’on va implémenter à partir d’un objet Document. Cette
méthode renvoie un objet Element qui représente l’élément dont la valeur de l’attribut id correspond à la valeur spéci ée en argument.
La méthode getElementById() est un moyen simple d’accéder à un élément en particulier (si celui-ci possède un id) puisque les id sont uniques
dans un document.
//Sélectionne l'élément avec un id = 'p1' et modifie la couleur du texte
document.getElementById('p1').style.color = 'blue';
Accéder à un élément en fonction de la valeur de son attribut class
Les interfaces Element et Document vont toutes deux dé nir une méthode getElementsByClassName() qui va renvoyer une liste des éléments
possédant un attribut class avec la valeur spéci ée en argument. La liste renvoyée est un objet de l’interface HTMLCollection qu’on va pouvoir
traiter quasiment comme un tableau.
En utilisant la méthode getElementsByClassName() avec un objet Document, la recherche des éléments se fera dans tout le document. En
l’utilisant avec un objet Element, la recherche se fera dans l’élément en question.
//Sélectionne les éléments avec une class = 'bleu'
let bleu = document.getElementsByClassName('bleu');
//"bleu" est un objet de HTMLCollection qu'on va manipuler comme un tableau
for(valeur of bleu){
valeur.style.color = 'blue';
}
Tuto : Les sélecteurs
Dans ce nouveau chapitre, découvrez les sélecteurs.
Durée de la vidéo : 26"47 minutes.
C'est parti !
Manipuler les éléments HTML
Manipulation des éléments (Création, modi cation, suppression)
Créer un élément en JavaScript
DRIF - Secteur Digital & IA
Page 6 / 11
ofppt 5 - Manipuler JQUERY
Il est courant que les sites Web interactifs créent de nouveaux éléments dynamiquement sur l'action de l'utilisateur et les utilisent. Alors,
comment créer un nouvel élément ?
La façon dont nous créons de nouveaux éléments est d'utiliser la méthode createElement. Appelez la méthode createElement via
documentobject et transmettez le nom de la balise de l'élément que vous souhaitez créer.
La méthode createElement convertit le nom de balise de l'élément en minuscules avant de créer l'élément.
Ajouter un élément en JavaScript
Pour que l'élément créé fasse partie du document, nous devons le spéci er comme élément parent et lui ajouter un élément nouvellement créé.
Pour ajouter un élément, utilisez la méthode append(). Il insère un ensemble d' objets Node ou d' objets DOMString en tant que dernier enfant
du ParentNode
Supprimer un élément en JavaScript
Dans une application Web interactive, vous souhaiterez non seulement créer et ajouter un nouvel élément au document, mais également
supprimer tout élément souhaité.
La méthode removeChild supprime un élément de la structure DOM. Le nœud à supprimer est passé en argument à la méthode.
La méthode removeChild renvoie une référence au nœud enfant qui est supprimé.
Modi er un élément en JavaScript
La replaceChild()méthode remplace un nœud par un autre nœud dans le DOM.
DRIF - Secteur Digital & IA
Page 7 / 11
ofppt 5 - Manipuler JQUERY
Mise à jour des styles, attributs et classes
Une fois que nous avons identi é l’élément de manière unique, nous pouvons utiliser les méthodes .style ou .className pour changer ses styles
CSS.
Dé nir le style à l’aide de element.className
On peut utiliser element.className pour changer divers paramètres de style d’un élément HTML en les regroupant comme une classe et en
attribuant le nom de la classe à l’élément sélectionné avec element.className. Cette méthode est utile, en particulier dans les scénarios où nous
devons af cher une erreur dans un champ de saisie. Dans ce cas, nous devons changer la couleur de la bordure du champ de saisie en couleur
rouge et le texte intérieur de l’entrée en couleur rouge. Par conséquent, nous pouvons regrouper ces styles en tant que classe et les affecter à
l’élément en utilisant l’attribut element.className. Le code suivant illustre la gestion des erreurs.
Mise à jour d'un attribut avec setAttribute
La setAttribute()méthode est utilisée pour dé nir un attribut sur l'élément spéci é.
Si l'attribut existe déjà sur l'élément, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spéci és. Le code
JavaScript dans l'exemple suivant ajoutera les attributs class et disabled à l'élément <button>.
Suppression d'attributs d'éléments
La méthode removeAttribute() est utilisée pour supprimer un attribut de l'élément spéci é.
Le code JavaScript dans l'exemple suivant supprimera l'attribut href d'un élément d'ancrage.
DRIF - Secteur Digital & IA
Page 8 / 11
ofppt 5 - Manipuler JQUERY
Création DOMMenuObject
Syntaxe
Résultat
DRIF - Secteur Digital & IA
Page 9 / 11
ofppt 5 - Manipuler JQUERY
Les évènements en Jquery
Dans ce nouveau chapitre, découvrez les évènements.
Durée de la vidéo : 26"47 minutes.
C'est parti !
Programmer de la musique avec Javascript
Dans cette vidéo, vous allez apprendre à programmer en Javascript avec une vidéo explicative et ludique. Vous allez suivre pas à pas les
explications du formateur et découvrir les mille et une possibilité du langage Javascript.
Vous pouvez télécharger la che PDF " Apprendre Javascript en musique" de consignes à droite de l'écran.
C'est parti !
Verify to continue
We detected a high number of errors from your connection.
To continue, please confirm that you’re a human (and
not a spambot).
I'm not a robot
reCAPTCHA
Privacy - Terms
Tuto : Les effets
Dans ce nouveau chapitre, découvrez comment maîtriser les effets.
DRIF - Secteur Digital & IA
Page 10 / 11
ofppt 5 - Manipuler JQUERY
Durée de la vidéo : 10"56 minutes.
C'est parti !
Tuto : Les animations
Dans ce nouveau chapitre, découvrez les animations.
Durée de la vidéo : 26"12 minutes.
C'est parti !
DRIF - Secteur Digital & IA
Page 11 / 11
