ROYAUME DU MAROC
مكتب التكوين المهني وإنعاش الشغل
office de la formation professionnelle et de la promotion du travail
ISMONTIC TANGER
MODULE 105: Programmation JAVACRIPT
MANIPULER LE DOM
ADDARRAZI ILHAM
2023-2024
Le Document Object Model (DOM)
Le DOM (Document Object Model) est une interface pour les pages web.
C'est une API permettant aux programmes de lire et de manipuler le contenu de la page, sa
structure et ses styles.
Le DOM est une interface vers un document HTML. Il est utilisé par les navigateurs dans
une première étape pour déterminer ce qui peut être rendu à l'écran, et par JavaScript pour
modifier le contenu, la structure ou le style de la page.
la composition d'un document HTML est représentée sous forme d'un jeu
d'objets – lesquels peuvent représenter une fenêtre, une phrase ou un style, par
exemple – reliés selon une structure en arbre.
À l'aide du DOM, un script peut modifier le document présent dans le navigateur en
ajoutant ou en supprimant des nœuds de l'arbre.
Le Document Object Model (DOM)
meta
head
Title Ma page web
html
h1 Ma page web
Bonjour, nous
sommes les
p
stagiaires du
body groupe TDI 201
Nous étudions à
a ISMONTIC
Le Document Object Model (DOM)
Chaque entité de l'arborescence est appelée un nœud (node). On distingue deux
types de nœuds :
Les éléments HTML, comme <body> ou<p>. Ces nœuds peuvent avoir des
sous-nœuds, appelés fils ou enfants (children).
Les éléments correspondant au contenu textuel de la page. Ces nœuds ne
peuvent pas avoir de fils.
Le DOM représente une page web sous la forme d'une hiérarchie d'objets, où
chaque objet correspond à un nœud de l'arborescence de la page.
Les objets du DOM disposent de propriétés et de méthodes permettant de les
manipuler avec JavaScript.
Le Document Object Model (DOM)
La racine du DOM : La variable document
document correspond à l'élément<html>
Cette variable est un objet et dispose des propriétés head et body qui permettent
d'accéder respectivement aux éléments <head> et <body> de la page
var h = [Link]; // La variable h contient l'objet head du
DOM
[Link](h);
var b = [Link]; // La variable b contient l'objet body du
DOM
[Link](b);
Le Document Object Model (DOM)
Chaque objet du DOM a une propriété nodeType qui indique son type.
La valeur de cette propriété est :
document.ELEMENT_NODE pour un nœud "élément" (balise HTML)
document.TEXT_NODE pour un nœud textuel.
if ([Link] === document.ELEMENT_NODE)
{
[Link]("Body est un noeud élément");
}
else
{
[Link]("Body est un noeud textuel");
}
Le Document Object Model (DOM)
Chaque objet du DOM de type élément possède une propriété childNodes
childNodes correspond à une collection qui permet d’accéder aux différents enfants
d'un nœud, on peut:
Connaître sa taille avec length,
Accéder à ses éléments grâce à leur indice,
La parcourir avec une boucle for
[Link]([Link][1]);
//Parcourir la liste des nœuds d’un enfant:
// Affiche les noeuds enfant du noeud body
for (var i = 0; i < [Link]; i++)
[Link]([Link][i]);
for(let i=0; i < [Link][5].[Link]; i++)
[Link](`${i} contient ${[Link][5].childNodes[i]}`);
Le Document Object Model (DOM)
Rechercher les éléments directement par nom
getElementsByTagName
getElementsByClassName
getElementById / getElementsByName
Rechercher les éléments par sélecteur CSS
querySelectorAll
querySelector
Obtenir des informations sur les éléments DOM (propriétés)
innerHTML
textContent
getAttribute / setAttribute (méthode)
hasAttribute (méthode)
classList
Manipulation de formulaires en
Javascript
1. L’architecture
L’objet "form" est un des principaux objets d’un document qui contient tous les
formulaires d’une page Web. La structure est composée de plusieurs tableaux ou "array"
qui vont des formulaires aux options en passant par les éléments. Noter que l’index
commence à 0.
Les éléments d’un formulaire sont les champs de saisie comme un champ texte ou encore
les boutons de sélection et boîte à cocher communément appelés "radio button" et
"checkbox".
Les options, dernier tableau au bout de cette structure, sont une propriété spécifique de
l’élément "liste de sélection".
Voici donc comment accéder
à chaque niveau de cette structure:
[Link][1].élément[1].option[1].propriété
Manipulation de formulaires en
Javascript
Il y’a un accès direct via l’index de chaque formulaire ou éléments, il est possible
d’utiliser l’attribut "name". Pour utiliser cette technique, il faut spécifier la propriété
"name" lors de la déclaration du formulaire et des éléments :
<form name="monForm"...> pour un formulaire ou <input name="monElement"...>.
Une fois le formulaire est identifié, il faut pas localiser sa position dans le tableau mais
simplement à donner son nom.
Syntaxe: [Link]été
Manipulation de formulaires en
Javascript
2. Récupérer le contenu d’une zone de texte (input / textarea):
<form name="f1">
<input type="text" name="t1" id="id1"/>
</form>
Méthode 1 : [Link];
var a = [Link];
Méthode 2 : [Link]()
var a = [Link] ('t1') [0].value;
Méthode 3 : [Link]()
var a = [Link]('id1').value;
Manipulation de formulaires en
Javascript
2. Récupérer le contenu d’une zone de texte (input / textarea):
Exemple:
Voici une zone de texte. Entrez une valeur et appuyer sur le bouton pour contrôler celle-ci.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function controle(form1) {
var test = [Link];
alert("Vous avez tapé : " + test);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="bouton"
VALUE="Contrôler" > </FORM>
</BODY>
</HTML>
Manipulation de formulaires en
Javascript
2. Récupérer le contenu d’une zone de texte (input / textarea):
Exemple : Tester si un champ est vide
function validerForm() <form name="myForm"
{ validerForm()"
var x = [Link]["myForm"] method="post">
["fname"].value;
//var x = Name: <input type="text"
[Link]; name="fname">
if (x == "")
{ alert("Le nom doit être <input type="submit"
saisi"); value="Submit">
return false; }
else </form>
{ alert(x);
return true; }
}
</script>
Manipulation de formulaires en
Javascript
2. Ecrire une valeur dans une zone de texte
Exemple : Entrez une valeur quelconque dans la zone de texte d'entrée. Appuyer sur le
bouton pour afficher cette valeur dans la zone de texte de sortie.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function afficher(form2) {
var testin =document. [Link];
[Link]=testin
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form2">
<INPUT TYPE="text" NAME="input" VALUE=""> Zone de
texte d'entrée <BR>
<INPUT TYPE="button" NAME="bouton"
VALUE="Afficher" > <INPUT TYPE="text" NAME="output" VALUE=""> Zone de
texte de sortie
</FORM>
</BODY>
</HTML>
Manipulation de formulaires en
Javascript
3. Récupérer le contenu d’un checkBox:
Méthode 1 : [Link];
//Il faut donner le même nom à toutes les balises <input type="checkbox">
Exemple :
<form name="f1">
fruits: <br><input type="checkbox" name="fruit" value="fraise"> fraise <br>
<input type="checkbox" name="fruit" value="banane"> banane <br>
<input type="checkbox" name="fruit" value="pomme"> pomme <br>
</form>
var for(var i=0;
tab=[Link]('fr i<[Link];i++)
uit');
var v=tab[0].checked; // sectionné ou if([Link][i].checked)
non
var vl=tab[0].value; // la valeur alert([Link][i].value);
alert(v+" valeur: "+vl);
Manipulation de formulaires en
Javascript
3. Récupérer le contenu d’un radioButton:
Méthode 1 : [Link];
//Il faut donner le même nom à toutes les balises <input type="radio">
Exemple :
<form name="f1">
fruits: <br><input type="checkbox" name="fruit" value="fraise"> fraise <br>
<input type="checkbox" name="fruit" value="banane"> banane <br>
<input type="checkbox" name="fruit" value="pomme"> pomme <br>
</form>
function f(){
var tab=[Link]
for(elt of tab){
if([Link]){
alert(`vous avez selectionne ${[Link]}`)
}
}}
Manipulation de formulaires en
Javascript
4. Récupérer le contenu d’un comboBox:
Méthode 1 : [Link];
var a = [Link];
Méthode 2 : [Link]()
var a = [Link] ('vil') [0].value;
Méthode 3 : [Link]()
var a = [Link]('s1').value;
Exemple :
var for(var i=0;
tab=[Link]('fr i<[Link];i++)
uit');
var v=tab[0].checked; // sectionné ou if([Link][i].checked)
non
var vl=tab[0].value; // la valeur alert([Link][i].value);
alert(v+" valeur: "+vl);
Manipulation de formulaires en
Javascript
5. Exercice d’application:
le changement du select dans la liste permet de calculer le résultat et l’afficher dans
la zone « result »
La gestion d’évènements en javascript
Un événement est une réaction à une action émise par l'utilisateur, comme le clic
sur un bouton ou la saisie d'un texte dans un formulaire.
En JavaScript, un évènement est une action qui se produit et qui possède deux
caractéristiques essentielles :
C’est une action qu’on peut « écouter », c’est-à-dire une action qu’on peut
détecter car le système va nous informer qu’elle se produit ;
C’est une action à laquelle on peut « répondre », c’est-à-dire qu’on va
pouvoir attacher un code à cette action qui va s’exécuter dès qu’elle va se
produire.
Il existe de nombreux évènements répertoriés en JavaScript (plus d’une
centaine). Les évènements qui vont nous intéresser particulièrement sont les
évènements liés au Web et donc au navigateur. Ces évènements peuvent être très
différents les uns des autres :
Le chargement du document est un évènement ;
Un clic sur un bouton effectué par un utilisateur est un évènement ;
Le survol d’un élément par la souris d’un utilisateur est un évènement ;
Etc.
La gestion d’évènements en javascript
1. un gestionnaire d’évènements
Pour être efficace, il faut qu'à ces événements soient associées des actions
prévues par le programmeur. C'est le rôle des gestionnaires d'événements. La
syntaxe est :
onEvénement="fonction()«
La gestion d’évènements en javascript
1. un gestionnaire d’évènements
Les événements:
La gestion d’évènements en javascript
1. un gestionnaire d’évènements
Onclick: Le clic de la souris est utilisé sur les objets javascript document, form
et sur les balises HTML a, body, area et autres…
Exemple :
<form><input type="button" value="Cliquez ici" avez
bien cliqué ici')"></form> <div style="width:100px;height:100px;border:1px
solid red" avez clické dans le div')"></div>
Ondbclick: Cet événement est généré quand on fait un double clique. Il est
utilisé sur les objets javascript document,area et avec les balises HTML a, body,
area et autre…
Exemple :
<div style="width:100px;height:100px;border:1px solid red"
avez double clické')"></div>
La gestion d’évènements en javascript
1. un gestionnaire d’évènements
OnMouseOver / OnMouseOut : L'événement onMouseOver se produit lorsque
le pointeur de la souris passe au dessus (sans cliquer) d'un lien ou d'une image.
Cet événement est fort pratique pour, par exemple, afficher des explications soit
dans la barre de statut soit avec une petite fenêtre genre infobulle, Il peut être
utilisé avec a, area et autre….
Exemple :
<form>
<input type="button" value="Bouton" avez passé la
souris sur le boutton’) »>
</form>
<div style="width:100px;height:100px;border:1px solid red"
avez quitté le boutton')"> </div>
<a href="" important</a>
La gestion d’évènements en javascript
1. un gestionnaire d’évènements
OnMouseDown : quand le bouton de la souris est appuyé. Est utilisé sur la
balise HTML a, body, form et autre…
OnMouseMove : quand le curseur bouge. Est utilisé sur la balise HTML a, body,
form .
OnMouseUp : quand le bouton de la souris est relâché. Est utilisé sur la balise
HTML a, body, input, et autre…
La gestion d’évènements en javascript
1. un gestionnaire d’évènements
OnKeyDown : lorsqu’une touche est enfoncée. Il est utilisé sur les balises
HTML a, img, body, textarea. KeyDown est utile pour tout ce qui est navigation
demandant qu'une touche reste appuyée.
OnKeyPress : lorsqu’une touche est activée. Il est utilisé sur la balise HTML a,
img, body, textarea,…
OnKeyUp : quand on lâche la touche. Il est utilisé sur les balises HTML a, img,
body, textarea et autre
La gestion d’évènements en javascript
1. un gestionnaire d’évènements
Onfocus : survient lorsqu'un champ de saisie a le focus. C'est souvent la
conséquence d'un clic de souris ou de l'usage de la touche "Tab".
Onblur : a lieu lorsqu'un champ de formulaire perd le focus. Cela se produit
quand l'utilisateur clique en dehors du champ ou utilise la touche "Tab" pour
passer à un champ.
onchange : se produit quand l’utilisateur modifie le contenu d’une balise input,
select.
Onselect : cet événement se produit lorsque l'utilisateur a sélectionné tout ou
partie d'une zone de texte dans une zone de type text ou textarea.
OnAbort : L'utilisateur a stoppé le chargement de l'image.
OnResize : quand on redimensionne la fenêtre, ..
OnReset , OnSubmit ..
