Chapitre2 JavaScriptEtDOM

Développement Web
Chapitre 2 : JavaScript / DOM

Qu’est ce que JavaScript ?
♦ JavaScript est un langage de programmation de scripts qui, incorporé aux balises
HTML ou XHTML, permet d’agrémenter la présentation et l’interactivité des
pages web.
♦ JavaScript permet de :
- animer du texte ou des images
- réagir à l’action de l’utilisateur
- vérifier la saisie dans les formulaires
- effectuer des calculs simples
- demander une confirmation
- afficher la date et l’heure
- rediriger l’utilisateur vers une autre page
-…
06/12/2022 Prof. Hafida ZROURI 2

Principes de base de JavaScript
♦ Comment intégrer le code JavaScript dans une page web ?
▪ Insérer le code JavaScript dans le head ou le body du document HTML à l’aide de
la balise <script> :
<script type="text/javascript">
…
</script>
▪ Faire appel à un fichier JavaScript externe dans le document HTML :
<script type="text/javascript" src="script.js"></script>
Remarque : Dans HTML5, l’attribut type est devenu optionnel.
▪ Le code JavaScript peut être inséré directement dans la balise HTML fonctionnant
alors comme la valeur d’un attribut de celle-ci.
<balise onEvenement="codeJavaScript"> … </balise>
Ex. : <a href="#" onClick="javascript:history.go(-1);">Retour à la page précédente</a>

♦ Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
document.write("Mon premier script JavaScript");
</script>
</body>
</html>

♦ Variables et typage :
▪ Déclaration avec les mots clés : var, let, const. (pas de déclaration de type)
Ex : var x ; let ch = "HTML" ; const PI = 3.14;
▪ Le type de la variable dépend de la valeur stockée dans cette variable.
▪ Les types de JavaScript : Number, Boolean, String, Null, Undefined, Object
♦ Opérateurs :
▪ Opérateurs arithmétiques : + , - , * , / , % (reste de la division)
▪ Opérateurs booléens : && , || , !
▪ Opérateurs de comparaison : == , ===, != , !==, < , <= , > , >=
▪ Opérateurs associatifs : += , -=, *=, /= (Ex. : x -= y est équivalent à x = x – y)
▪ Opérateurs d’incrémentations/décrémentations : ++, --
▪ Opérateur de concaténation : +

♦ Structures de contrôle :
- if(exprBool) { instruction(s) } [else { instruction(s) }]
- (condition) ? instruction1 : instruction2;
- switch(variable) {
case val1 : inst1; …; break;
case …
[default : inst1; …]
}
- while(exprBool) { instruction(s) }
- do { instruction(s) } while (exprBool);
- for(initialisation; condition d’arrêt; expression à répéter ) { instruction(s) }
- for(variable in tableau) { instruction(s) } // variable représente les indices
- for(variable of tableau) { instruction(s) } // variable représente les données

♦ Tableaux :
▪ Tableaux indexés :
- Création : let tab = new Array(); OU tab = new Array(taille);
OU tab = new Array(elem1, elem2, …); OU tab = [elem1, elem2, …];
- Assigner une valeur à un élément : tab[i] = valeur; avec 0≤i<tab.length
- Accéder à un élément : tab[i] avec 0≤i<tab.length
- Exemple : let tab=[1, 2, 3]; for(let i=0; i<tab.length; i++) document.write(tab[i]+" ");
▪ Tableaux associatifs :
- Création et initialisation :
let tab = new Array(); OU let tab = {};
tab["cle1"] = valeur1;
tab["cle2"] = valeur2; …
OU let tab = {"cle1" : valeur1, "cle2" : valeur2, …};
- Accéder à un élément : tab["cle"]
- Exemple : let tab = {"a" : 1, "b" : 2, "c" : 3}; for(let v in tab) alert(tab[v]);
♦ Fonctions :
▪ Définition :
function nomFonction([param1, param2,...]) {
...;
// return resultat;
}
▪ Exemple :
function moyenne(x, y) {
return (x+y)/2;
}
function affiche(texte) {
alert(texte);
}
let y = moyenne(5,6);
affiche('La moyenne = ' + y);
▪ Particularités des fonctions JavaScript :
- Une fonction peut appeler des arguments de tout type, ainsi que des fonctions et les
fonctions peuvent être appelées récursivement.
- Le nombre des paramètres passés à l'appel de la fonction n'est pas obligatoirement égal
au nombre des paramètres nommés dans la définition de la fonction (Les paramètres
excédentaires sont ignorés, ceux manquants sont remplacés par undefined ).
- JavaScript ne se fonde pas sur le concept de signature afin d’identifier les fonctions à
l'exécution mais uniquement sur leurs noms. Cela conduit à des comportements assez
inattendus puisque, quand deux fonctions portent le même nom, c'est la dernière définie
qui est exécutée et ce quelque soit les paramètres qui lui sont passés.
Exemple :
function test(param1) { alert(param1); }
function test(param1, param2) { alert(param1 + "-" + param2); }
test("JavaScript"); // appelle la 2ème fonction
Afin de gérer les paramètres passés à une fonction, JavaScript met à disposition l’objet
arguments. Ce dernier ressemble à un tableau contenant les différents paramètres passés
à la fonction lors de son appel. Cet élément de langage offre la possibilité à une fonction
de gérer différents appels avec un nombre de paramètres différent.

Exemple : function test() {
if(arguments.length==1) alert(arguments[0]);
if(arguments.length==2) alert(arguments[0] + "-" + arguments[1]);
}
test("HTML"); // appelle la 1ème fonction alert
test("HTML", "JavaScript"); // appelle la 2ème fonction alert
- On peut définir une fonction à l'intérieur d'une autre fonction, elle ne sera pas accessible de
l’extérieur. La fonction imbriquée peut utiliser les arguments et les variables de la fonction
parente. En revanche, la fonction parente ne peut pas utiliser les arguments et les variables
de la fonction fille.
Exemple : function externe(param1) {
let maVariable = param1;
function interne(param2) { alert(param2+" - " + maVariable); }
return interne;
}
let fct = externe("JavaScript");
fct("Exemple");

♦ Fonctions anonymes :
Les fonctions anonymes sont des fonctions qui ne possèdent pas de nom.
▪ Elles sont passées en paramètres ou affectées à une variable.
- Exemple :
let test = function() {
alert('Bonjour !');
};
test();
function calcul(a , b , f) {
return f(a,b);
}
let d = calcul(2, 5, function(u,v) {
return u-v;
} );
▪ Elles peuvent être utilisées pour isoler une partie du code.
- Syntaxe :
// code externe
(function() {
// Code isolé
})();
// code externe
- Remarque : Il y a deux paires de parenthèses, une 1ère paire encadrant la fonction et une
2ème paire suivant la première : Une fonction, lorsqu'elle est déclarée, n'exécute pas
immédiatement le code qu'elle contient, elle attend d'être appelée. Or l’utilisation du
2ème paire de parenthèses va exécuter ce code immédiatement.
- Exemple :
var c = 'noir';
(function() { var c = 'blanc'; alert('Dans la zone isolée, la couleur est : ' + c); })();
alert('Dans la zone non-isolée, la couleur est : ' + c);

♦ Fonctions fléchées :
Les fonctions fléchées sont des fonctions qui possèdent une syntaxe plus courte et ne
possèdent pas de valeur pour this ni pour l’objet arguments. Elles ne sont pas destinées à
être utilisées pour déclarer des méthodes.
Syntaxe : let nom = ([param1] [, param2,...]) => { instructions };
ou let nom = ([param1] [, param2,...]) => valeur ou expression;
ou let nom = param1 => { instructions };
ou let nom = param1 => valeur ou expression;
S'il n'y a pas d'arguments, cela doit être indiqué par ().
S'il y a plusieurs instructions, elles doivent être encadrées par des accolades. Une
expression unique ne doit pas obligatoirement être entourée d'accolades. L'expression
est également la valeur de retour implicite de la fonction.
Exemple : let somme = (a, b) => a + b;
alert(somme(3,5));
/* Cette fonction peut s’écrire : let somme = function(a, b) { return a + b; }; */

♦ Paramètres des fonctions :
▪ Valeurs par défaut des arguments : permettent d'initialiser des paramètres lors de l'appel
de la fonction si aucune valeur n'est passée ou si c'est la valeur undefined qui est passée.
Exemple : function multiplication(x, y=1, z=2) {
return x * y*z;
}
let a = multiplication(1, 3); // a = 6
let b= multiplication(5, undefined, 3); // b = 15
▪ Paramètres du reste : permettent de représenter un nombre indéfini d'arguments sous
forme d'un tableau.
Syntaxe : function nomFonction ([a, b,] ...lesArguments) {
//…
}
Si le dernier paramètre nommé fourni à la fonction est préfixé de ... (trois points), il
devient un tableau dont les éléments entre 0 (inclus) et lesArguments.length (exclus)
sont fournis comme autres arguments à la fonction.
Exemple : function addition(commentaire, ...args) {
let resultat = 0;
args.forEach(param => {resultat += param;});
return commentaire + " => " + resultat;
}
alert(addition('Somme',3,4,5)); // Somme => 12
Remarque : La méthode forEach() permet d'exécuter une fonction donnée sur chaque
élément du tableau.
Différence entre les paramètres du reste et l'objet arguments :
» Les paramètres du reste sont uniquement ceux qui ne possèdent pas de noms à part
entière (c.à.d ceux qui ne sont pas formellement définis dans l'expression de fonction),
l'objet arguments contient chaque argument passé à la fonction.
» L'objet arguments n'est pas un tableau. Le paramètre représentant les arguments
restant est une instance d'Array à laquelle on peut appliquer directement des méthodes
comme sort, forEach, pop, …

♦ Les chaînes de caractères : String
- Il est possible de créer des chaînes de caractères comme des valeurs primitives ou comme des
objets avec le constructeur String() :
const s1 = "HTML-CSS"; const s2 = new String("JavaScript");
- Les chaînes de caractères peuvent être placées entre guillemets simples ('), doubles (") ou
accents graves (`). Cette dernière forme permet de définir un littéral de gabarit de chaîne de
caractères dans lequel on pourra incorporer n’importe quelle variable ou expression dans la
chaîne de caractères, en l’enveloppant dans ${…}. Les gabarits permettent d'écrire sur
plusieurs lignes (tous les espaces et les sauts de ligne sont conservés).
Exemple :
function somme(a, b) { return a + b; }
alert(`1 + 2 = ${somme(1, 2)}`); // 1 + 2 = 3
let a = "bonjour";
let b = `${a} tout le monde`; // bonjour tout le monde
let c = `4 + 3 = ${4+3}`; // 4 + 3 = 7
let ligneLongue = `Cette chaine de caractères est longue et
est placée sur plusieurs lignes de texte`;

- Outre l'attribut length qui retourne le nombre de caractères d’une chaîne, il existe beaucoup de
méthodes pour les chaines de caractères.
▪ concat(ch1[, ch2, ..., chN]) : combine le texte de une ou plusieurs chaînes avec la chaîne appelante
et renvoie la nouvelle chaîne ainsi formée.
▪ startsWith() : renvoie un booléen indiquant si la chaine de caractères commence par la chaine de
caractères fournie en argument.
▪ endsWith() : renvoie un booléen indiquant si la chaine de caractères se termine par la chaine de
caractères fournie en argument.
▪ trim() : permet de supprimer les blancs (espaces, tabulations, …) au début et à la fin de la chaîne de
caractères.
▪ trimStart() et trimEnd() : permettent de supprimer les blancs au début ou (respectivement) à la fin
de la chaîne de caractères.
▪ replace(str1, str2) : remplace la première occurrence de la chaîne str1 par la chaîne str2.
▪ substring(i, j) : permet d'extraire une partie de la chaîne, entre les deux indices i (inclus) et j
(exclu).
Exemple :
let ch1 = " HTML";
let ch2 = ch1.concat(" - ", "JavaScript ");
document.write(ch2.length + "<br />" + ch2.trim().length + "<br />");
document.write("StartsWith ==> " + ch2.startsWith(" HTML"));

▪ toLowerCase() et toUpperCase() : permettent de mettre la chaîne en minuscule ou
(respectivement) en majuscule.
▪ split(sep) : découpe la chaîne en tableau, les éléments étant définis par le séparateur "sep", qui
n'apparait plus.
▪ search(str), indexOf(str, i), lastIndexOf(str) : permettent de rechercher l'indice de l'apparition
d'une sous chaîne dans la chaîne, ou retournent -1 si elle n'y est pas. search et indexOf retourne
la première occurrence, sauf qu'avec indexOf il est possible de préciser l'indice de début de
recherche. lastIndexOf retourne la dernière occurrence.
▪ charAt(i) : retourne le caractère à l'indice i si i est compris entre 0 et la longueur de la chaîne – 1
sinon le premier caractère sera renvoyé . (Remarque : La seconde solution pour récupérer un
caractère est de manipuler la chaîne comme un tableau, où les caractères sont les éléments du
tableau et ont un indice correspondant à leur position)
▪ at(i) : retourne le caractère à l'indice i. Cette méthode permet d'utiliser des arguments positifs ou
négatifs. Si i est négatif, c'est le caractère situé à la position i comptée depuis la fin de la chaîne
qui est renvoyé.
Exemple : let str = 'Cours de JavaScript';
str.charAt(1) ou str.at(1) ou str[1] renvoie la lettre « o »
str.at(-1) renvoie le dernier caractère « t »
str.indexOf("a", 11) renvoie la valeur 12
str.substring(0,6) renvoie la sous-chaîne « Cours »
let tab = str.split(" "); alert ("[" + tab + "]"); // affiche : [Cours,de,JavaScript]
♦ Quelques méthodes prédéfinies :
▪ eval() évalue la chaîne de caractères transmises et renvoie le résultat.
▪ parseInt() | parseFloat() retourne la conversion de la chaîne en un entier | un réel.
▪ isNaN() vérifie si le paramètre est un nombre invalide.
▪ variable = prompt("texte de la boîte d’invite ", "valeur par défaut");
▪ alert("chaîne de caractères");
▪ if(confirm("chaîne de caractères")) … else …
▪ document.write("texte");
▪ nom_du_compteur = setTimeout("fonction_appelée", temps en milliseconde);
clearTimeout(nom_du_compteur);
▪ nom_du_compteur = setInterval("fonction_appelée", temps en milliseconde);
clearInterval(nom_du_compteur);

Événements en JavaScript
♦ Les événements sont des actions de l'utilisateur qui donnent lieu à une interactivité.
♦ Associer un événement à un élément :
▪ Méthode 1 [utilisation des attributs HTML de type évènement (non recommandé)] :
Il suffit de mettre dans la balise le nom du gestionnaire de l'événement et de lui
associer une (ou plusieurs) fonction.
- Syntaxe : <balise onEvenement="maFonction([parm1, parm2,…])">
On peut exécuter plusieurs fonctions sur le même événement :
<balise onEvenement="maFonction1([…]); maFonction2([…]); … ">
On peut exécuter une fonction anonyme :
<balise onEvenement="(function([…]){…})([…])">
- Exemple :
<input type="text" size="25" name="nom" id="nom" onClick="f()">
<form action="script.php" method="post" onSubmit="return verfierForm()">
Si verifierForm() retourne false, script.php n’est pas appelé

♦ Associer dynamiquement un événement à un élément :
Consiste à ajouter un évènement à une balise dans la page HTML alors que la page
est déjà chargée ou à une balise HTML créée dynamiquement.
Il existe trois méthodes :
▪ Méthode 2 [utilisation des propriétés JavaScript liées aux évènements] :
Elle consiste à pointer vers l'élément cible, à lui associer l'évènement et à lui
adjoindre le nom de la fonction sans les parenthèses.
- Syntaxe : document.getElementById('ID').onEvenement = maFonction;
On peut aussi lui adjoindre une fonction anonyme :
document.getElementById('ID').onEvenement = function([…]){…};
- Remarque : On ne peut adjoindre qu'une seule fonction pour le même événement.
- Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
function action() {
document.body.style.backgroundColor = "lightblue";
let zone1 = document.getElementById("id1");
let zone2 = document.getElementById("id2");
zone1.onclick = function() {this.style.fontWeight="bold";};
zone2.onclick = function() {this.style.border="solid 2px red";};
}
window.onload = action;
</script>
</head>
<body>
<div id="id1">Zone 1 pour le test des événements !</div>
<div id="id2">Zone 2 pour le test des événements !</div>
</body>
</html>
- L’objet event : il est créé pour chaque événement. Il est passé en paramètre à la
fonction écouteur associée lors de son appel.
Quelques propriétés et méthodes de cet objet :
• event.type : retourne le type de l'évènement (click, mouseover, ...).
• event.currentTarget : retourne l’élément qui a déclenché l'évènement
(l’élément auquel est attaché l’écouteur d’événement).
• event.preventDefault() : empêche l'exécution de l'action par défaut de
l'événement. Exemple :
<a href="https://google.fr" id="test"> Google </a>
<script>
document.getElementById('test').onclick = function(e) { // objet event passé en argument
e.preventDefault(); // annule la redirection
}
</script>
▪ Méthode 3 [utilisation de la méthode addEventListener() (recommandé)] :
Elle utilise la méthode addEventListener.
- Syntaxe :
document.getElementById('ID').addEventListener('événement', maFonction);
Pour retirer l'événement on utilise la méthode removeEventListener :
document.getElementById('ID').removeEventListener('événement', maFonction);
A noter que l'événement n'est pas précédé par "on".
- Remarques :
• On peut adjoindre à l’événement une fonction anonyme.
• On peut aussi adjoindre plusieurs fonctions pour le même événement.
Ex :
document.getElementById('id1').addEventListener('click', f1);
document.getElementById('id1').addEventListener('click', f2);
function f1() {…}
function f2() {…}
Exemple :
Dans le <head> de la page HTML :
function lancerLesEcouteurs() {
let image = document.getElementById("monImage");
image.addEventListener("mouseover", function() { this.src = 'paris.jpg'; });
image.addEventListener("mouseout", function() { this.src = 'einstein.jpg'; });
let pied = document.getElementById("piedDePage");
pied.addEventListener ("click", taille);
pied.addEventListener ("click", contenu);
}
function taille(event) { event.currentTarget.style.fontSize = "16px"; }
function contenu(event) {
event.currentTarget.innerHTML += "<address>Email : h.zrouri@ump.ma</address>";
}
window.addEventListener("load", lancerLesEcouteurs);
</script>

Dans le <body> de la page HTML :
<img src="einstein.jpg" id="monImage" alt="Einstein" width="140" height="100">
<div id="piedDePage">Contactez moi !</div>
Remarque : Dans une fonction écouteur, l’opérateur this est définie et désigne l’objet
cible de l’événement.

▪ Méthode 4 [utilisation de la méthode setAttribute()] :
Un évènement dans une balise est considéré comme un attribut c’est pour cela nous
pouvons utiliser la méthode setAttribute pour l’ajouter à la balise. (Voir plus loin
pour plus de détail pour cette méthode)
- Syntaxe :
document.getElementById('ID').setAttribute('onEvenement', 'maFonction([…])');
Pour retirer l'événement on utilise la méthode removeAttribute :
document.getElementById('ID').removeAttribute('onEvenement');
- Remarques :
• On peut adjoindre à l’événement une fonction anonyme.
• On peut aussi adjoindre plusieurs fonctions pour le même événement (on les sépare
par ;).
• Le problème de cette méthode c'est que si il y a plusieurs fonctions associées à
l'évènement il ne sera pas possible de retirer l'évènement à l'une des fonctions. On
pourra uniquement les retirer toutes en retirant l'attribut de la balise avec
removeAttribute.
♦ Quelques attributs d’événements :
Événement/propriété Se déclanche quand …

onclick Un clic est détecté sur l’élément
ondblclick Un double click est détecté sur l’élément
onfocus L’élément gagne le focus
onblur L’élément perd le focus
onerror Une erreur est survenue durant le chargement de la page
onselect Du texte est sélectionné
onload La page est chargée par le navigateur
onunload L’utilisateur quitte la page
onresize La fenêtre est redimensionnée

Suite ….
onchange La valeur d’un élément html change. Il est déclenché
quand l’élément perd le focus
onkeydown Une touche est pressée
onkeyup Une touche est relâchée
onmousedown Un bouton de la souris est pressé
onmouseup Un bouton de la souris est relâché
onmouseover La souris bouge au dessus de l’élément
onmouseout La souris bouge en dehors de l’élément
onsubmit Un clic est détecté sur le bouton submit d'un formulaire
onreset Un clic est détecté sur le bouton reset d'un formulaire
Suite ….

oninput Le contenu de certains éléments HTML (input,
textarea) d'un formulaire change. Contrairement à
l'attribut onchange, l'attribut d'évènement oninput est
appelé immédiatement après avoir modifié le contenu
de l'élément HTML
oncopy L'utilisateur copie l'objet ou qu'une sélection est copiée
dans le presse-papiers
oncut L'objet ou la sélection est coupé du document et ajouté
au presse-papiers
onpaste L'utilisateur "colle" des données du presse-papiers vers
le document

Exemple : Interdire le copier-coller dans un formulaire.
<form action="inscription.php" method="post">

Nom de l'utilisateur : <input type="text" name="login" /> <br />
Mot de passe : <input type="password" name="passw"
oncopy="return false;" oncut="return false;" /> <br />
Confirmation du mot de passe : <input type="password" name="confirmPassw"
onpaste="return false;" /> <br />
<input type="submit" value="Envoyer" />
</form>

Objets en JavaScript
♦ Un objet est un ensemble de couples (propriété, valeur).
▪ La valeur d’une propriété peut être une chaîne de caractères, un nombre, un booléen
ou, à son tour, un objet, y compris un tableau ou une fonction.
▪ Quand la valeur d’une propriété est une fonction, nous disons que c’est une
méthode. Le code contenu dans la méthode peut accéder aux propriétés de l’objet à
travers l’opérateur this.
♦ Un objet a une structure dynamique : on peut ajouter ou supprimer des propriétés à un
objet à l'exécution.
♦ Il existe différentes sortes d'objets en JavaScript :
▪ Objets natifs : objets prédéfinis dans le langage
Ex : Number, String, Date, …
▪ Objets du navigateur
Ex : Window, document, …
▪ Objets définis par les utilisateurs

♦ Création d'objets :
Un objet en JavaScript peut être créé de plusieurs façons :
1. Des objets littéraux (à la façon des tableaux associatifs) :
- Syntaxe :
let monObj = {
[ propriete1 : valeur1,
propriete2 : valeur2,
…]
};
- Exemple :
let point = { x : 0, y : 0,
deplace : function(a, b) {this.x += a; this.y += b;},
affiche : function() {document.write('Point(' + this.x +', ' + this.y + ')');}
};
point.deplace(1, 5); point.affiche();
Remarque : Pour les méthodes, on peut utiliser la notation concise comme ci-dessous :
let point = { x : 0, y : 0,
deplace(a, b) {this.x += a; this.y += b;},
affiche() {document.write('Point(' + this.x +', ' + this.y + ')');}};
- Accès aux propriétés :
▪ L'accès aux propriétés (en lecture ou en écriture) se fait avec la notation pointée.
Il est également possible d'utiliser les crochets pour accéder aux propriétés.
Ex : point.y = 5; // ou : point["y"] = 5;
point.affiche(); // ou : point["affiche"]();
▪ Si on accède en lecture à une propriété qui n'existe pas, on obtient la valeur undefined
▪ Dans une affectation, si une propriété n'existe pas dans un objet, celle-ci sera créée :
Ex : point.z = 20; // ça ajoute une nouvelle propriété à l'objet point
point['initialiser'] = function(a,b) {this.x=a; this.y=b;}; point['initialiser'](3,10);
- Supprimer une propriété d’un objet :
▪ Syntaxe : delete objet.propriété; Ex : delete point.z;
2. En utilisant l’objet Object :
JavaScript permet de créer un objet en se fondant sur l'objet prédéfini Object.
- Syntaxe :
let obj = new Object(); // Création d'un objet "vierge"
obj.propriete1 = valeur1;
obj.methode1 = function ([…]){…};
…
- Exemple :
let o = new Object();
o.x = 5.6;
o.y = 3.1;
o.produit = function() { return (this.x*this.y); };
alert(o.produit()); // affiche 17.36

3. En utilisant la méthode create() :
- Syntaxe :
let obj = Object.create({
…
});
- Exemple :
let p1 = {a : 1, b : 2};
let p2 = Object.create(p1); alert(p2.a); // affiche : 1
let o = Object.create({
x : 2,
y : 8,
somme : function() { return (this.x + this.y); }
});
alert(o.somme()); // affiche : 10
4. En utilisant le constructeur personnalisé :
- En JavaScript, un constructeur n’est qu’une fonction qui est appelée avec l’opérateur
new.
function MonConstructeur([param1, param2,…]) {
this.attribut1 = param1;
this.methode1 = function([…]) {…};
…
}
- Pour créer un objet obj avec le constructeur MonConstructeur, on écrit :

let obj = new MonConstructeur([…]);

- Prototype :
JavaScript propose la notion d'objet prototype. Tout objet dispose d'un objet
prototype possédant toutes les propriétés communes à la « classe », propriétés dont
il hérite au moment de sa création.
Pour accéder au prototype d'un objet créé, il faut passer par la propriété prototype de
la fonction constructeur : MonConstructeur.prototype
Le prototype est donc un objet qui représente le constructeur d'objet. Il est possible
de rajouter dynamiquement des propriétés et des méthodes à la fonction
constructeur à tout moment grâce à son prototype :
MonConstructeur.prototype.nouvelleMethode = function([…]) {…};
MonConstructeur.prototype.nouvellePropriete = valeur;
Mécanisme de surcharge :
Ce mécanisme consiste à modifier une propriété ou une méthode en cours de route.
Quand on appelle une méthode sur une instance, JavaScript va vérifier si elle existe
dans le constructeur avant de la chercher dans l'objet prototype. Si une méthode est
déclarée dans le constructeur elle ne pourra pas être surchargée par le prototype.

- Exemple 1 :
function Personne(nom, prenom) {
this.nom = nom;
this.prenom = prenom;
this.affiche = function() {
document.write('Nom : ' + this.nom + ' | Prenom : ' + this.prenom); };
}
let obj1 = new Personne('Boularcha', 'Mohamed'); obj1.affiche();
Personne.prototype.anneeNaissance = 1989;
Personne.prototype.age = function() {
var a = (new Date()).getFullYear()-this.anneeNaissance;
document.write(' | Age : ' + a + '<br />');
};
obj1.age();
let obj2 = new Personne('Azaiis', 'Amal');
obj2.anneeNaissance = 1996;
obj2.affiche(); obj2.age();
- Exemple 2 :
let Femme = function(nom) {
this.nom = nom;
this.parle = function() {
document.write("Bonjour");
};
};
Femme.prototype.parle = function() {
document.write("Salut");
};
let moi = new Femme("Zrouri");

moi.parle(); // affiche : Bonjour

- Propriété d’instance et propriété statique :
▪ Une propriété d’instance est définie dans la structure de la fonction constructeur et est
initialisée par celle-ci à chaque création d’instance. On utilise le mot clé this pour
référencer l’objet.
▪ Une propriété statique n’est accessible qu’à travers le constructeur; contrairement aux
propriétés d’instances qui sont copiées pour chaque objet, il n’en existe qu’une seule
copie.
Syntaxe:
function MonConstructeur(param1, …) {
// Initialisation des propriétés d'instance
this.propriete1 = param1;
…
}
// Propriété statique
MonConstructeur.proprieteStatique = valeur;
// Accès en lecture à une propriété statique
let v = MonConstructeur.proprieteStatique;
// Accès en écriture à une propriété statique
MonConstructeur.proprieteStatique = autreValeur;
- Méthode d’instance et méthode statique :
▪ Une méthode d’instance est une fonction qui est héritée par toutes les instances issues
du constructeur définissant cette méthode. Dans une méthode d’instance, l’objet (ou
l’instance) sur lequel agit la méthode est référencée par le mot clé this.
▪ Une méthode statique contrairement à une méthode d’instance, n’est pas invoquée sur
l’objet mais sur le constructeur; Donc elle ne peut pas utiliser le mot clé this.
Exemple:
function Point(abs, ord) {
this.x = abs;
this.y = ord;
this.toString = function(){return ('Point(' + this.x +', ' + this.y + ')');}; //méthode d'instance
}
Point.prototype.equals = function(p){return(this.x===p.x && this.y===p.y);}; //méthode d'instance
Point.equals = function(p1, p2) {return (p1.x===p2.x && p1.y===p2.y);}; //méthode statique
let p1 = new Point(3,7); let p2 = new Point(3,7); let p3 = new Point(4,1);
document.write("p1 = "+p1 +"<br />p2 = "+ p2+"<br />p3 = "+p3+"<br />");
document.write("p1==p2 => "+p1.equals(p2)+"<br />");
document.write("p1==p3 => "+Point.equals(p1,p3));

- Héritage et prototype :
JavaScript supporte les hiérarchies d'héritage par prototypage.
▪ Faire hériter attributs et méthodes :
ConstructeurFille.prototype = new ConstructeurMere();
où ConstructeurFille.prototype = Object.create(ConstructeurMere.prototype );
▪ Réassigner le constructeur :
ConstructeurFille.prototype.constructor = ConstructeurFille;
Cette instruction permet de modifier la référence à la fonction constructeur. En effet,
si on supprime cette instruction , (new ConstructeurFille()).constructor retournera
ConstructeurMere.
Chaque objet possède une propriété constructor héritée de l’objet prototype. Cette
propriété est utile pour déterminer le type d’objet.
▪ Dans le constructeur du prototype fille, appeler la méthode call du prototype parent,
avec les arguments nécessaires ; => Cela permet de créer le prototype fille.
- Exemple :
function Personne(nom, age) {
this.nom = nom;
this.age = age;
this.comparer = function(p) {return (this.age===p.age);};
}
Personne.prototype.toString = function() {
return ('Nom : ' + this.nom + ' | age : ' + this.age);
};
let p1 = new Personne('Boularcha', 19);

let p2 = new Personne('Ababou', 19);
document.write(p1+"<br />"+p2+"<br />Même âge ? "+p1.comparer(p2));

- Exemple (suite) :
Developpeur.prototype = new Personne();
// ou Developpeur.prototype = Object.create(Personne.prototype);
Developpeur.prototype.constructor = Developpeur;
function Developpeur(nom, age, langage) {
Personne.call(this, nom, age);
this.langage = langage;
this.toString = function() {
return (Personne.prototype.toString.call(this) + ' | langage : ' + this.langage);
};
/* this.toString = function() {
return ('Nom : ' + this.nom + ' | age : ' + this.age + ' | langage : ' + this.langage);
}; */
}
let d1 = new Developpeur("Namir", 27, "Java");
let d2 = new Developpeur("Azais", 34, "JavaScript");
document.write(d1+"<br />"+d2+"<br />Même âge ? "+d1.comparer(d2));
Classes en JavaScript
♦ A partir de 2015, JavaScript a introduit les classes et l’héritage classique.
▪ Le mot-clé class permet de simuler le fonctionnement classique des classes mais les prototypes restent
toujours aux commandes. Syntaxe : class NomDeLaClasse{ … }
▪ Dans une classe, on peut placer un seul constructeur (constructor) et des méthodes (on n'utilise pas le
mot-clé function).
▪ On peut créer une propriété directement dans la classe mais on peut aussi utiliser des accesseurs (get)
et des modificateurs (set).
▪ On peut créer des méthodes statiques dans une classe avec le mot clé static.
▪ Les attributs statiques ou les données relatives au prototype doivent être définies en dehors de la
déclaration comportant le corps de la classe :
NomDeLaClasse.attributStatique = valeur;
NomDeLaClasse.prototype.propriétéProto = valeur;
♦ Pour utiliser la classe et ainsi créer et utiliser un objet c’est une syntaxe classique :
objet = new NomDeLaClasse([param1, param2, …]);
♦ Une classe peut être déclarée comme étant une sous-classe d’une autre classe en spécifiant le mot clé
extends : class sous_classe extends super_classe { … }
▪ On fait appel au constructeur de la classe mère en utilisant le mot-clé super(…) avec les paramètres
requis (super(…) doit être la 1ère instruction du constructeur de la classe fille).
▪ Le mot-clé super suivi du nom de la méthode sert à appeler une méthode définie dans la classe mère.

- Exemple :
class Personne {
constructor(nom, prenom, age) {
this.nom = nom;
this.prenom = prenom;
this.age = age;
}
get nomComplet() { return (this.prenom + ' ' + this.nom); }
set nomComplet(val) { let tab = val.split(' '); this.nom = tab[0]; this.prenom = tab[1]; }
toString() { return ('Nom : ' + this.nomComplet + ' | age : ' + this.age); }
equals(p){ return (this.age===p.age); }
static equals(p1,p2){ return (p1.age===p2.age); }
}
let p1 = new Personne('Boularcha', 'Amal', 19);
let p2 = new Personne('Ababou', 'Mohamed', 19);
document.write(p1+"<br />"+p2+"<br />Même âge ? "+Personne.equals(p1,p2)+"<br />");
p1.nomComplet = 'Namir Morad';
document.write(p1);
- Exemple (suite) :
class Developpeur extends Personne {
constructor(nom, prenom, age, langage) {
super(nom, prenom, age);
this.langage = langage;
}
set nomMajuscule(n) { super.nomComplet = n.toUpperCase(); }
toString() { return (super.toString() + ' | langage : ' + this.langage); }
}
let d1 = new Developpeur("Namir", "Amal", 27, "Java");
let d2 = new Developpeur("Azais", "Mohamed", 34, "JavaScript");
document.write(d1+"<br />"+d2+"<br />Même âge ? "+d1.equals(d2)+"<br />");
d1.nomMajuscule = 'Boularcha Ahmed';
document.write(d1.nomComplet);

Qu’est ce que le DOM ?
♦ Le Modèle Objet de Document ou DOM (Document Object Model) définit un
mode standardisé pour accéder et mettre à jour tous les éléments d’un document
HTML, XHTML ou XML.
♦ Le DOM n’est pas en soi un langage de balise ou de programmation mais

simplement une manière de percevoir, de parcourir et de manipuler un
document HTML, XHTML ou XML, en utilisant des méthodes et des
propriétés spécifiques.
♦ Le but de DOM :
▪ Interfacer les langages de programmation avec les documents HTML, XHTML
ou XML en les associant avec un modèle orienté objet.
▪ DOM permet aux programmes et scripts d'accéder et de modifier
dynamiquement le contenu, la structure et le style de documents XML,
XHTML ou HTML.

Concept de nœud (node)
♦ Selon le DOM, tout composant ou élément d’un document HTML, XHTML ou XML
constitue un nœud (node). Ces différents nœuds sont en relation les uns avec les autres. Il
est alors possible de représenter un document selon une structure arborescente. Cette
arborescence sous forme d’une arbre possède : une racine, des nœuds, des feuilles.
♦ Tout composant étant un nœud, on peut concevoir :
▪ Le document entier comme un nœud, appelé nœud document (document node)
▪ Chaque balise ou élément est un nœud élément (element node)
▪ Le texte contenu entre les balises est un nœud texte (text node)
▪ Les commentaires deviennent des nœuds de commentaires (comment node)
▪…
♦ Lorsqu'une page web se charge complètement, un objet est créé : l'objet window.document. Il
propose en particulier des raccourcis pour accéder à certains éléments d'une page web :
▪ document.head retourne le nœud <head>
▪ document.title retourne le nœud <title>
▪ document.body retourne le nœud <body>
▪ document.images retourne tous les nœuds <img>
▪ document.forms retourne tous les nœuds <form>

Hiérarchisation des nœuds
♦ Le DOM est une approche objet du modèle d'arbre: Chaque nœud est un objet, et des
méthodes permettent d’accéder aux nœuds en relation avec un nœud donné (car
les nœuds ont une relation hiérarchique entre eux).
♦ Exemple :
Le document HTML La hiérarchie de ce document
document
<html>
<head>
<title>Exemple</title> html
</head>
<body> head body
<h1>Le DOM</h1>
<p>Arbre des nœuds</p>
</body> title h1 p
</html>
Exemple Le DOM Arbre des
nœuds
Hiérarchisation des nœuds
♦ Chaque nœud, excepté le nœud document, a un nœud parent. Ainsi, le nœud
<head> possède un élément enfant, le nœud <title>. A son tour, le nœud <title>
comporte un élément enfant, le nœud texte "Exemple".
♦ Certains nœuds sont frères et sœurs (siblings) car ils partagent le même parent.
Ainsi, les nœuds <h1> et <p> sont frères et sœurs car ils sont tous les deux des
éléments enfant du nœud <body>.
♦ Des nœuds peuvent avoir des ascendants et des descendants :

▪ Les ascendants sont les nœuds qui sont parents d'un nœud ou parents d'un nœud
parent. Tous les nœuds texte ont le nœud <html> comme ascendant et le nœud
de texte de <p> a le nœud élément <body> comme ascendant.
▪ Les descendants sont les nœuds qui sont enfants d'un nœud ou enfant d'un nœud
enfant. Tous les nœuds texte sont des descendants du nœud <html> et le nœud
de texte de <p> est descendant du nœud <body>.

Propriétés de l’objet Node
♦ La classe centrale représentant un nœud DOM est Node. Elle définit différentes propriétés
afin de donner accès aux informations relatives au nœud, telles que son type et son nom.
♦ Les propriétés de relation :
▪ x.parentNode : renvoie le nœud parent du nœud x.
▪ x.firstChild : renvoie le premier nœud enfant du nœud x.
▪ x.firstElementChild : renvoie le premier nœud enfant du nœud x en ne considérant pas les
nœuds texte.
▪ x.lastChild : renvoie le dernier nœud enfant du nœud x.
▪ x.lastElementChild : renvoie le dernier nœud enfant du nœud x en ne considérant pas les
nœuds texte.
▪ x.previousSibling : renvoie le nœud frères/sœurs précèdent le nœud x.
▪ x.previousElementSibling : renvoie le nœud frères/sœurs précèdent le nœud x en ne
considérant pas les nœuds texte.
▪ x.nextSibling : renvoie le nœud frères/sœurs suivant le nœud x.
▪ x.nextElementSibling : renvoie le nœud frères/sœurs suivant le nœud x en ne considérant
pas les nœuds texte.
▪ x.childNodes : stocke une liste de tous les nœuds enfant disponibles à partir du nœud x,
incluant les nœuds texte.
▪ x.children : stocke une liste de tous les nœuds enfant disponibles à partir du nœud x, excluant
les nœuds texte.
▪ x.childElementCount : indique le nombre de nœuds enfant du nœud x, excluant les nœuds
texte.
▪ x.attributes : stocke une liste de tous les attributs du nœud x.
Remarque : document.documentElement renvoie l'élément racine du document (par exemple,
l'élément <html> pour les documents HTML).
nœudElement.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud.
♦ Les propriétés d’état :
Ces propriétés permettent de s’informer sur l’état d’un nœud.
▪ x.nodeName : indique le nom de la balise du nœud x si ce dernier est un nœud élément (le
nom de la balise est toujours retourné en majuscule). Si x est un nœud texte, cette propriété
renvoie #text.
▪ x.nodeType : indique le type du nœud x. Ce type prend différentes valeurs :
1 pour les éléments 2 pour les attributs 3 pour les nœuds de texte
8 pour les commentaires 9 pour le document
▪ x.nodeValue : permet d’obtenir ou de changer la valeur du nœud x (de type texte ou de type
attribut). Cette valeur peut être nulle lorsque aucune valeur n’est associée à la balise.

♦ Exemple :
Selon l’arbre du document de l’exemple précèdent :
Pour le nœud élément <body> Pour le nœud élément <h1>
nodeName : BODY nodeName : H1
nodeType : 1 nodeType : 1
nodeValue : null nodeValue : null
parentNode : Le nœud élément html parentNode : Le nœud élément body
childNodes : Les nœuds élément h1 et p childNodes : Le nœud texte
firstChild : Le nœud élément h1 firstChild : Le nœud texte
lastChild : Le nœud élément p lastChild : Le nœud texte
nextSibling : null nextSibling : Le nœud élément p
previousSibling : Le nœud élément head previousSibling : null

Accès aux nœuds
1. Par la procédure classique :
▪ Cette méthode consiste à définir le chemin, d’objet en objet, vers l’objet concerné.
▪ Elle ne met pas en œuvre les spécifications du DOM et a été appelée DOM niveau 0.
▪ Exemple :
<html>
<head>
<title>DOM</title>
<script type="text/JavaScript">
function test() { var nom = document.f.votrenom.value;
alert("Bonjour " + nom + "!"); }
</script>
</head>
<body>
<form name="f" action="">
Nom : <input type="text" name="votrenom" /><br />
<input type="button" value="Entrer" onclick="test()" />
</form>
</body>
</html>

Accès aux nœuds
2. Par la méthode getElementById :
▪ Cette méthode parcourt le document à la recherche d’un nœud unique qui a été
spécifié par l’attribut id. Cet identifiant id doit être unique dans le document.
▪ Exemple :
<html>
<head>
<title>DOM</title>
function test() {let x = document.getElementById("titre").nodeName;
alert(x); }
</script>
</head>
<body>
<h1 id="titre" onclick="test()">Exemple</h1>
<p>Cliquez sur le titre</p>
</body>
</html>

Accès aux nœuds
3. Par la méthode getElementsByName :
▪ Cette méthode permet de sélectionner les éléments portant un nom donné,
spécifié par l’attribut name. Les éléments portant le même nom sont stockés dans
une liste de type NodeList.
▪ Exemple :
<html>
<head>
<title>DOM</title>
function test() {let x = document.getElementsByName("para");
alert(x[2].innerHTML); }
</script>
</head> ou : x.item(2)
<body>
<h1 onclick="test()">Cliquer ici !</h1>
<p name="para">Définition de la DOM</p>
<p name="para">Notion d'arbre</p>
<p name="para">Accéder aux nœuds</p>
</body>
</html>

Accès aux nœuds
4. Par la méthode getElementsByTagName :
▪ Cette méthode parcourt le document à la recherche de toutes les balises d’un type
spécifique, signalé en argument. Ces éléments sont stockés dans une liste de type
NodeList. Cette méthode peut s’invoquer sur l’objet document ou sur un objet élément,
dans le second cas seuls les éléments descendants sont sélectionnés.
▪ Exemple :
<html>
<head>
<title>DOM</title> ou : . item(0)
function test() { let nom = document.getElementsByTagName("input")[0].value;
alert("Bonjour " + nom + "!"); }
</script>
</head>
<body>
<form name="form" action="">
Nom : <input type="text" name="votrenom" /><br />
<input type="button" value="Entrer" onclick="test()" />
</form>
</body>
</html>
Accès aux nœuds
5. Par la méthode getElementsByClassName :
▪ Cette méthode permet de sélectionner les éléments ayant une classe donnée, spécifiée par
l’attribut class. Les éléments ayant la même classe sont stockés dans une liste de type
NodeList. Cette méthode peut s’invoquer sur l’objet document ou sur un objet élément,
dans le second cas seuls les éléments descendants sont sélectionnés.
▪ Exemple :
<body>
<div id="iddiv">
<p class="test1">HTML-CSS</p>
<p class="test2">JavaScript</p>
<p class="test1">PHP</p>
</div>
<script>
let contenu ="";
let eltParent = document.getElementById("iddiv");
let elements1 = eltParent.getElementsByClassName("test1");
for(let i=0; i<elements1.length; i++) contenu += elements1[i].innerHTML + "\n";
let elements2 = document.getElementsByClassName("test2");
contenu += "Nombre d'éléments sélectionnés par la classe test 2 : " + elements2.length;
alert(contenu);
</script>
</body>
Accès aux nœuds
6. Par la méthode querySelector ou querySelectorAll :
▪ Les méthodes querySelector et querySelectorAll permettent d’accéder à des éléments
correspondant à un sélecteur CSS spécifié en argument, que ce soit un id, une classe, un type
d’élément, un attribut ou autre. Plusieurs sélecteurs peuvent être spécifiés, séparés par une
virgule. Ces méthodes peuvent s’invoquer sur l’objet document ou sur un objet élément, dans le
second cas seuls les éléments descendants sont sélectionnés.
▪ La méthode querySelector retourne le premier élément tandis que la méthode querySelectorAll
retourne tous les éléments sélectionnés qui seront stockés dans une liste de type NodeList.
▪ Exemple :
<body>
<p>HTML et <em>CSS</em></p>
<p class="test">JavaScript et <em>DOM</em></p>
<p>XML</p> Après le clique
<p class="test">PHP</p>
<script>
let element = document.querySelector("p>em");
element.style.fontSize="2em";
let elements = document.querySelectorAll(".test, p:nth-of-type(3)");
for(let i=0; i<elements.length;i++) elements[i].onclick = function() {this.style.textDecoration="overline"};
</script>
</body> Remarque : les sélecteurs avec les pseudo-éléments ne sont pas acceptés (la liste résultat est vide)

Accès aux nœuds
7. Par les propriétés des nœuds :
▪ On utilise l’une des méthodes vues précédemment ( getElementById, getElementsByName
ou getElementsByTagName, …) pour se rapprocher de l’élément et, à partir de la, on
utilise les propriétés firstChild, parentNode ou autres propriétés similaires pour accéder à
l’élément souhaité.
▪ Exemple :
<html>
<head> Ce code n’est pas compatible avec les navigateurs actuels, à cause des passages à
<title>DOM</title> la ligne qui sont considérés comme des éléments enfant (éléments de texte vide).
function test() { let y = document.getElementById("texte");
let x = document.getElementById("titre").parentNode.childNodes[2].firstChild;
y.value = x.nodeValue; }
</script>
</head>
<body onclick="test()">
<h1 id="titre">Exemple</h1>
<p>Définition de DOM</p>
<div>Accéder aux noeuds</div>
<form>La réponse :<input type="text" id="texte" readonly/></form>
</body>
</html>

Accès aux attributs
♦ Les attributs sont des propriétés de l’élément, et non pas des enfants de celui-ci.
♦ La propriété attributes renvoie une liste des attributs d’un élément spécifié. Cette
liste de nœuds attributs est renvoyée sous forme d’un objet de type
NamedNodeMap. Ce qui implique que les attributs seront accessibles par leur
nom.
♦ La méthode getNamedItem() retrouve un nœud selon le nom spécifié en argument.
Soit,
let paragraphe = document.getElementsByTagName("p")[0];
let attributs = paragraphe.attributes;
let langue = attributs.getNamedItem("lang");
La variable langue contient l’attribut lang du premier paragraphe du document.

Accès aux attributs
♦ Exemple :
<html>
Ce code n’est pas compatible avec les navigateurs actuels, à cause des passages à
<head> la ligne qui sont considérés comme des éléments enfant (éléments de texte vide).
<title>DOM</title>
function test() { let para = document.getElementById("titre").nextSibling;
let attributs = para.attributes;
let l = attributs.getNamedItem("lang").nodeValue;
alert("Language : "+l); }
</script>
</head>
<body onclick="test()">
<p lang="fr">Accéder aux attributs</p>
</body>
</html>
Manipulation des nœuds
♦ Le DOM permet de créer de nouveaux nœuds élément ou nœuds texte et de les insérer
dans le document, modifiant ainsi la hiérarchie de celui-ci.
1. La méthode createElement :
▪ Elle crée un nouvel élément.
▪ Syntaxe : element = document.createElement("NomBalise");
▪ Exemple : let x = document.createElement("div");
▪ Il faut noter que l’élément ainsi créé n’apparaît pas encore dans le document. Il faut
utiliser les méthodes appendChild ou insertBefore pour l’ajouter à celui-ci.
2. La méthode createTextNode :
▪ Elle crée un nœud texte dans le document.
▪ Syntaxe : texte = document.createTextNode(donnees);
- texte est un nœud de texte.
- donnees est une chaîne contenant les données à placer dans le nœud de texte.
▪ Exemple : let x = document.createElement("h1");
let y = document.createTextNode("Créer un nœud texte");
▪ Il faut noter que le nœud ainsi créé n’apparaît pas encore dans le document. Il faut
utiliser les méthodes appendChild ou insertBefore pour l’ajouter à celui-ci.
Manipulation des noeuds
3. La méthode appendChild :
▪ Elle ajoute un enfant (de type élément ou texte) spécifié en argument comme
dernier nœud enfant d’un nœud. Elle s’applique donc toujours à un nœud parent.
▪ Syntaxe :
nœudAjouté = nœudParent.appendChild(nouvelNœudEnfant);
- nœudParent est l'élément parent.
- nouvelNœudEnfant est le nœud à ajouter.
- nœudAjouté contiendra l'élément ajouté, soit nouvelNœudEnfant.
▪ Remarque :
Si le nœud ajouté existe déjà dans le document, il est alors déplacé, donc
supprimé de la position existante et ajouté à la position demandée.

▪ Exemple 1 :
<html>
<head>
<title>DOM</title>
function actualiser() { let x = document.getElementsByTagName("h1")[0];
x.parentNode.appendChild(x); }
</script>
</head>
<body onclick="actualiser()">
<h1>Exemple</h1>
<p>Accéder aux nœuds et aux attributs</p>
</body>
</html>
▪ Exemple 2 :
<html>
<head>
<title>DOM</title>
function actualiser() {let x = document.createElement("p");
let texte = document.createTextNode("Ajouter un nouveau texte");
x.appendChild(texte);
document.body.appendChild(x); }
</script>
</head>
<h1>Exemple</h1>
</body>
</html>
4. La méthode insertBefore :
▪ Elle permet d’insérer un nœud avant un autre nœud.
▪ Syntaxe :
nœudInséré = nœudParent.insertBefore(nouvelNœud, nœudRéférence);
- nœudInséré : le nœud inséré, c'est-à-dire nouvelNœud
- nœudParent : le parent du nœud nouvellement inséré.
- nouvelNœud : le nœud à insérer.
- nœudRéférence : le nœud avant lequel nouvelNœud est inséré.
Si nœudRéférence retourne une valeur null, le nouvelNœud est inséré à la fin
de la liste des nœuds enfant du nœudParent.
▪ Remarque :
Si le nœud inséré existe déjà dans le document, il est alors déplacé, donc
supprimé de la position existante et inséré à la position demandée.
▪ Exemple :
<html>
<head>
<title>DOM</title>
function actualiser() {let x = document.getElementsByTagName("p")[0];
let y = document.getElementsByTagName("h1")[0];
x.parentNode.insertBefore(x,y); }
</script>
</head>
<h1>Exemple</h1>
</body>
</html>
5. La méthode replaceChild :
▪ Elle remplace un nœud par un autre nœud. Le nœud ainsi remplacé, est
supprimé ainsi que tous ses descendants.
▪ Syntaxe :
noeudRemplacé = noeudParent.replaceChild(nouvelEnfant, ancienEnfant);
- nouvelEnfant est le nouveau nœud qui remplacera ancienEnfant.
Si nouvelEnfant existe déjà dans le DOM, il sera d'abord enlevé.
- ancienEnfant est le nœud existant à remplacer.
- noeudRemplacé est le nœud remplacé. C'est le même nœud
que ancienEnfant (Si le remplacement réussi, l'ancien nœud sera retourné)

▪ Exemple :
<html>
<head>
<title>DOM</title>
let y = document.getElementsByTagName("p")[1];
x.parentNode.replaceChild(x,y); }
</script>
</head>
<h1>Exemple</h1>
</body>
</html>
6. La méthode removeChild :
▪ Elle supprime le nœud (et éventuellement ses descendants) fourni en argument.
▪ Syntaxe :
noeudSupprimé = noeudParent.removeChild(noeudEnfantAsupprimer);
- nœudEnfantAsupprimer est le nœud enfant à retirer du DOM.
- nœudParent est le nœud parent de nœudEnfantAsupprimer.
- nœudSupprimé conserve une référence au nœud nœudEnfantAsupprimer
retiré. (nœudSupprimé == nœudEnfantAsupprimer).
▪ Remarque :
Le nœud retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Il
peut être réutilisé plus tard dans le code, via la référence à l'objet nœudSupprimé.
Si nœudEnfantAsupprimer n'est pas un enfant du nœud nœudParent, la méthode
provoque une exception.

▪ Exemple :
<html>
<head>
<title>DOM</title>
function actualiser() { let x = document.getElementsByTagName("p")[0];
x.parentNode.removeChild(x); }
</script>
</head>
<h1>Exemple</h1>
</body>
</html>
7. La méthode cloneNode :
▪ Elle renvoie une copie du nœud courant.
▪ Syntaxe :
xCopie = x.cloneNode(true|false);
- xCopie est un nouveau nœud copie de x.
- Cloner un nœud élément copie tous ses attributs ainsi que leurs valeurs.
- Si le paramètre est défini à false, aucun des nœuds enfants n'est copié.
Le texte contenu dans le nœud élément n'est pas copié non plus, car il fait partie
d'un ou plusieurs nœuds texte enfants.
- Si le paramètre est défini à true, le sous-arbre entier est copié également (y
compris le texte qui peut être contenu dans des nœuds texte enfants).
▪ Remarque :
Le nœud renvoyé par cloneNode ne fera pas partie du document tant qu'il n'y est
pas ajouté via la méthode appendChild ou insertBefore.

▪ Exemple :
<html>
<head>
<title>DOM</title>
function actualiser() {let x = document.getElementsByTagName("h1")[0];
let xCopie = x.cloneNode(true);
x.parentNode.appendChild(xCopie); }
</script>
</head>
<h1>Exemple</h1>
</body>
</html>
Manipulation des attributs
♦ Tout nœud de type élément peut contenir des attributs permettant de lui ajouter des
informations. Un attribut possède un nom et une valeur.
♦ La classe Node met à disposition la propriété attributes afin de lister ses différents
attributs. Cette classe fournit également les méthodes suivantes :
▪ setAttribute : crée un attribut ou remplace la valeur d’un attribut existant pour
un élément.
▪ removeAttribute : supprime un attribut pour un élément.
▪ hasAttribute : détermine si un attribut est présent pour un élément.
▪ getAttribute : donne accès à la valeur d’un attribut. Dans le cas où l’attribut
n’existe pas, la méthode renvoie null.

♦ Exemple 1 :
<html>
<head>
<title>DOM</title>
function actualiser() {
let x = document.getElementById("titre");
x.setAttribute("style", "background-color: blue");
}
</script>
</head>
</body>
</html>

♦ Exemple 2 :
<html>
<head>
<title>DOM</title>
let y = document.getElementsByTagName("p")[0];
let valeurAtt = x.getAttribute("id");
if( y.hasAttribute("lang")) { y.removeAttribute("lang"); }
alert(valeurAtt + "\n" + y.attributes.length);
}
</script>
</head>
<p lang="fr">Définition de DOM</p>
</body>
</html>
Suppression des nœuds de texte vides
♦ Certains navigateurs actuels considèrent les sauts de ligne du code comme des nœuds de
texte vides. Le nombre d’enfants d’un élément est donc peut être différent selon le
navigateur utilisé pour afficher le document.
♦ Exemple :
<html>
<head>
<title>DOM</title>
let nbreEnfBody = document.body.childNodes.length;
alert ("Nbre d'enfants de body : " + nbreEnfBody);
}
</script>
</head>
<h1>Exemple</h1>
</body>
</html>

♦ Solution compatible :
Pour rendre le script compatible, il suffit, avant toute manipulation de code, d’enlever les
espaces vides du document HTML. Ainsi, ces problématiques nœuds de texte vide
disparaissent et le même code peut être utilisé pour naviguer dans le document quel que soit
le navigateur utilisé.
♦ Exemple :
<html>
<head>
<title>DOM</title>
function enleverEspaces(htmldocument) {
let index;
for (index = 0; index < htmldocument.childNodes.length; index++) {
let noeudc = htmldocument.childNodes[index];
if (noeudc.nodeType == 1) { enleverEspaces(noeudc); }
if ((/^\s+$/.test(noeudc.nodeValue)) && (noeudc.nodeType == 3)) {
htmldocument.removeChild(htmldocument.childNodes[index--]);
}
}
}

enleverEspaces(document.documentElement);
let nbreEnfBody = document.body.childNodes.length;
alert ("Nbre d'enfants de body : " + nbreEnfBody);
}
</script>
</head>
<h1>Exemple</h1>
</body>
</html>
♦ Explication :
- if ((/^\s+$/.test(noeudc.nodeValue)) && (noeudc.nodeType == 3)) {…} :
Si le nœud courant est un nœud texte (noeudc.nodeType == 3), il s’agit peut être d’un espace vide. Nous
allons tester le texte présent dans le nœud (propriété nodeValue) au moyen d’une expression régulière qui
permet de déceler les espaces vides, soit l’instruction (/^\s+$/.test(noeudc.nodeValue)).
- /^\s+$/ : est une expression régulière (\s+ : trouve un ou plusieurs fois toute sorte d’espace vide donc espace,
retour chariot, tabulation, saut de ligne, saut de page. $ : signale la fin de la chaîne de caractères et interdit
tout caractères supplémentaires).
- test(…) : teste la correspondance d’une chaîne. Elle renvoie la valeur true ou false.

Chapitre2 JavaScriptEtDOM

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre2 JavaScriptEtDOM

Transféré par

Droits d'auteur :

Formats disponibles

Développement Web

Chapitre 2 : JavaScript / DOM

06/12/2022 Prof. Hafida ZROURI 2

06/12/2022 Prof. Hafida ZROURI 3

06/12/2022 Prof. Hafida ZROURI 4

06/12/2022 Prof. Hafida ZROURI 5

06/12/2022 Prof. Hafida ZROURI 6

06/12/2022 Prof. Hafida ZROURI 9

06/12/2022 Prof. Hafida ZROURI 10

06/12/2022 Prof. Hafida ZROURI 12

06/12/2022 Prof. Hafida ZROURI 13

06/12/2022 Prof. Hafida ZROURI 15

06/12/2022 Prof. Hafida ZROURI 16

06/12/2022 Prof. Hafida ZROURI 17

06/12/2022 Prof. Hafida ZROURI 19

06/12/2022 Prof. Hafida ZROURI 20

06/12/2022 Prof. Hafida ZROURI 21

06/12/2022 Prof. Hafida ZROURI 25

06/12/2022 Prof. Hafida ZROURI 26

Événement/propriété Se déclanche quand …

06/12/2022 Prof. Hafida ZROURI 28

Événement/propriété Se déclanche quand …

06/12/2022 Prof. Hafida ZROURI 30

<form action="inscription.php" method="post">

06/12/2022 Prof. Hafida ZROURI 31

06/12/2022 Prof. Hafida ZROURI 32

06/12/2022 Prof. Hafida ZROURI 35

- Pour créer un objet obj avec le constructeur MonConstructeur, on écrit :

06/12/2022 Prof. Hafida ZROURI 37

06/12/2022 Prof. Hafida ZROURI 38

let moi = new Femme("Zrouri");

06/12/2022 Prof. Hafida ZROURI 40

06/12/2022 Prof. Hafida ZROURI 42

let p1 = new Personne('Boularcha', 19);

06/12/2022 Prof. Hafida ZROURI 44

06/12/2022 Prof. Hafida ZROURI 46

06/12/2022 Prof. Hafida ZROURI 48

♦ Le DOM n’est pas en soi un langage de balise ou de programmation mais

06/12/2022 Prof. Hafida ZROURI 49

06/12/2022 Prof. Hafida ZROURI 50

♦ Des nœuds peuvent avoir des ascendants et des descendants :

06/12/2022 Prof. Hafida ZROURI 52

06/12/2022 Prof. Hafida ZROURI 54

06/12/2022 Prof. Hafida ZROURI 55

06/12/2022 Prof. Hafida ZROURI 56

06/12/2022 Prof. Hafida ZROURI 57

06/12/2022 Prof. Hafida ZROURI 58

06/12/2022 Prof. Hafida ZROURI 61

06/12/2022 Prof. Hafida ZROURI 62

06/12/2022 Prof. Hafida ZROURI 63

06/12/2022 Prof. Hafida ZROURI 66

06/12/2022 Prof. Hafida ZROURI 71

06/12/2022 Prof. Hafida ZROURI 73

06/12/2022 Prof. Hafida ZROURI 75

06/12/2022 Prof. Hafida ZROURI 77

06/12/2022 Prof. Hafida ZROURI 78

06/12/2022 Prof. Hafida ZROURI 80

06/12/2022 Prof. Hafida ZROURI 81

06/12/2022 Prof. Hafida ZROURI 82

Vous aimerez peut-être aussi