Introduction à JavaScript
- Notions de Base -
Belabed Amine
[Link]@[Link]
Université De Tlemcen – Faculté des sciences, Département d’Informatique
2ème année Licence Informatique
2024-2025
A. Belabed (Univ Tlemcen) 2024-2025 1 / 24
JavaScript : Document Object Model (DOM)
A. Belabed (Univ Tlemcen) 2024-2025 2 / 24
Document Object Model (DOM)
Le DOM est une représentation en mémoire de la structure HTML
d’une page web sous forme d’un arbre d’objets.
L’objet prédéfini document représente la page HTML complète.
Le DOM implémente une API (interface de programmation)
spécifique aux navigateurs web qui permet à JavaScript d’interagir
avec le contenu HTML.
Le DOM permet une manipulation dynamique de la page HTML :
▶ Accéder aux éléments HTML (à leurs propriétés, leurs contenus, etc.).
▶ Modifier le contenu et/ou les propriétés des éléments HTML.
▶ Ajouter/Supprimer/Remplacer des éléments HTML.
▶ Réagir aux événements : Détecter et répondre aux actions des
utilisateurs comme les clics, la saisie au clavier, etc.
▶ Modifier les styles : Changer l’apparence des éléments en modifiant
leurs propriétés CSS.
A. Belabed (Univ Tlemcen) 2024-2025 3 / 24
Document Object Model (DOM)
Exemple :
A. Belabed (Univ Tlemcen) 2024-2025 4 / 24
DOM : Sélection des éléments
Sélection par ID : getElementById
▶ Retourne un objet unique (ou null si aucun élément ne correspond)
1 // HTML : <p id =" paragraphe " > Bonjour </p >
2 const paragraphe = d o cu me n t. g et El e me n tB yI d ( " paragraphe " ) ;
3 [Link] ( paragraphe ) ;
4 // Affiche object HTMLParagraphElement
Sélection par class : getElementsByClassName
▶ Retourne une liste HTML dynamique (HTMLCollection)
1 // HTML: <p class =" myP " > Texte 1 </p >
2 // <p class =" myP " > Texte 2 </p >
3 const paragraphes = d o c u m e n t . g e t E l e m e n t s B y C l a s s N a m e ( ' myP ') ;
4 // Acc è s au premier é l é ment de la collection
5 const prem ierPa ragraphe = paragraphes [0];
A. Belabed (Univ Tlemcen) 2024-2025 5 / 24
DOM : Sélection des éléments
Sélection par Nom de balise : getElementsByTagName
▶ Retourne une liste HTML dynamique (HTMLCollection)
1 // S é lectionne tous les liens
2 const tousLesLiens = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( 'a ') ;
Sélection par sélecteurs CSS : querySelector
▶ Retourne un objet unique (ou null si aucun élément ne correspond)
1 // S é lectionne le premier paragraphe avec la classe "
important "
2 f i rs t P a r a g r a p h e I m po r t a n t = do cu men t. qu ery Se le ct or ( '
[Link] ') ;
3 // S é lectionne le premier é l é ment avec l ' id " contenu "
4 fir stEl e m e n t I n C o n ten u = d oc ume nt .q ue ryS el ec to r ( '# contenu >
* ') ;
A. Belabed (Univ Tlemcen) 2024-2025 6 / 24
DOM : Sélection des éléments
Sélection par sélecteurs CSS : querySelectorAll
▶ Retourne une NodeList statique (qui ne se met pas à jour
automatiquement)
1 // S é lectionne tous les é l é ments li qui sont des enfants
directs d ' un ul
2 elementsDeListe = d o c um e n t . q u e r y S e l e c t o r A l l ( ' ul > li ') ;
A. Belabed (Univ Tlemcen) 2024-2025 7 / 24
DOM : Sélection des éléments
Exemples 1 :
1 // parcourir une liste d 'é l é ments en modifiant le style
2 const paragraphes = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( 'p ') ;
3 for ( let i = 0; i < [Link]; i ++) {
4 paragraphes [ i ]. [Link] = ' blue ';
5 }
Exemples 2 :
1 // Recherche uniquement dans l 'é l é ment avec l ' ID " contenu "
2 const conteneur = d oc u me n t. ge t El e me nt B yI d ( ' contenu ') ;
3 const paragraphes = c o n t e n e u r . q u e r y S e l e c t o r A l l ( 'p ') ;
A. Belabed (Univ Tlemcen) 2024-2025 8 / 24
DOM : Modification du contenu d’un élément
.innerText et .textContent : lire ou définir le contenu textuel
d’un élément, sans interpréter le HTML.
.innerHTML :Modifie le contenu HTML (peut inclure des balises).
Exemple :
1 // HTML : < h1 id =" titre " > Titre initial </ h1 >
2 const titre = d o c u me n t. ge t El e me nt B yI d ( " titre " ) ;
3 [Link] Conte nt = " Nouveau titre " ; // Change le texte
4 [Link] = " < em > Titre en italique </ em >" ; // Ajoute
du HTML
A. Belabed (Univ Tlemcen) 2024-2025 9 / 24
DOM : Manipulation des attributs
getAttribute, setAttribute et hasAttribute
Exemple :
1 const lien = d o c u m en t.q ue ry Sel ec to r ( 'a ') ;
2 // Obtenir l ' URL
3 const url = l [Link] ( ' href ') ;
4 // Modifier l ' URL
5 [Link] tribu te ( ' href ' , ' https: // [Link] ') ;
6 // Ajouter un attribut title
7 [Link] tribu te ( ' title ' , ' Visiter notre site ') ;
8 // V é rifier si l ' attribut target existe
9 if (! lie [Link] Attribute ( ' target ') ) {
10 // Ajouter l ' attribut target
11 [Link] ttribu te ( ' target ' , ' _blank ') ;
12 }
A. Belabed (Univ Tlemcen) 2024-2025 10 / 24
DOM : Propriétés d’attributs spécifiques
De nombreux attributs HTML courants sont directement accessibles
comme propriétés des éléments DOM :
1 // Manipulation directe des propri é t é s
2 [Link] = ' nouvelId ';
3 elem ent.c lassName = ' nouvelleClasse ';
4 [Link] = ' https: // [Link] ';
5 [Link] = ' [Link] ';
6 [Link] = ' Nouveau texte ';
7 [Link] = true;
8 [Link] = false;
Exemple :
1 const image = do cu me nt .qu er yS ele ct or ( ' img ') ;
2 [Link] = ' [Link] ';
3 [Link] = ' Description de la nouvelle image ';
4 const bouton = d oc um en t.q ue ry Sel ec to r ( ' button ') ;
5 [Link] = true; // D é sactive le bouton
A. Belabed (Univ Tlemcen) 2024-2025 11 / 24
DOM : Manipulation des styles CSS
La propriété style permet de manipuler directement les styles inline
d’un élément :
1 const boite = d oc u me n t. ge t El e me n tB yI d ( ' maBoite ') ;
2 boit [Link] [Link] = ' 200 px ';
3 boit e. st yl e. height = ' 100 px ';
4 b o i t e . s t y l e . b a c k g r o u n d C o l o r = '# f0f0f0 ';
5 boit e. st yl e. border = '1 px solid # cfcf ';
6 bo i t e . s t y l e . t ra nsi ti on = ' 0.3 s ';
A. Belabed (Univ Tlemcen) 2024-2025 12 / 24
DOM : Création et insertion d’éléments
createElement(), appendChild(), prepend(), before(),
after(), insertBefore()
1 // Ajouter comme dernier enfant
2 pare nt .a pp en dChild ( enfant ) ;
3 // Ins é rer avant un é l é ment de r é f é rence
4 pare n t .i n s er t Before ( nouvelElement , referenceElement ) ;
5 // M é thodes plus r é centes
6 [Link] ( enfant1 , enfant2 , ...) ; // Ajoute à la
fin , accepte plusieurs é l é ments et des cha î nes de
texte
7 [Link] ( enfant1 , enfant2 , ...) ; // Ajoute au d
é but
8 [Link] ( nouveauElement ) ; // Ins è re avant l 'é l é
ment
9 [Link] ( nouveauElement ) ; // Ins è re apr è s l 'é l é
ment
A. Belabed (Univ Tlemcen) 2024-2025 13 / 24
DOM : Création et insertion d’éléments
createElement(), appendChild(), prepend(), before(),
after(), insertBefore()
1 const liste = do cu me nt .qu er yS ele ct or ( ' ul ') ;
2 const newItem = doc um en t. cre at eE lem en t ( ' li ') ;
3 newI t e m. t e xt C ontent = ' Nouvel é l é ment de liste ';
4 list [Link] endChild ( newItem ) ; // Ajouter à la fin de la
liste
5 // Cr é er un autre é l é ment et l ' ajouter au d é but
6 const firstItem = do cu me nt .cr ea te Ele me nt ( ' li ') ;
7 fir s t I t e m . t e x tC onten t = ' Premier é l é ment ';
8 [Link] ( firstItem ) ;
9 // Ins é rer un é l é ment entre deux é l é ments existants
10 const intermediaire = do cu me nt .cr ea te Ele me nt ( ' li ') ;
11 i n t e r m e d i a i r e . te x t C o n t e n t = 'É l é ment interm é diaire ';
12 const troisiemeItem = [Link] [2]; // Obtenir
le troisi è me é l é ment
13 list e. in se rt Before ( intermediaire , troisiemeItem ) ;
A. Belabed (Univ Tlemcen) 2024-2025 14 / 24
DOM : Supprimer des éléments
remove(), removeChild(), replaceChild() :
1 const liste = do cu me nt .qu er yS ele ct or ( ' ul ') ;
2 const ancienItem = [Link] [1]; // Deuxi è me é l é
ment
3 const nouvelItem = do cu me nt .cr ea te Ele me nt ( ' li ') ;
4 no u v e l I t e m . t e xt Con te nt = 'É l é ment remplac é ';
5
6 // Remplacer l ' ancien é l é ment
7 list e. re pl ac eChild ( nouvelItem , ancienItem ) ;
8
9 // Supprimer le dernier é l é ment
10 const dernierItem = l i st e .l as t El e me nt C hi l d;
11 dern ie rI te m. remove () ;
A. Belabed (Univ Tlemcen) 2024-2025 15 / 24
DOM : Gestion des événements
La manipulation DOM devient interactive avec les événements (clics,
saisie, etc.), ce qui permet d’écouter et de réagir aux actions de
l’utilisateur.
Types courants d’événements :
▶ Clic : click, dblclick.
▶ Souris : mouseover, mouseout, mousemove, etc.
▶ Clavier : keydown, keyup, etc.
▶ Formulaire : submit, change, input, etc.
▶ Fenêtre : load, resize, scroll, etc.
A. Belabed (Univ Tlemcen) 2024-2025 16 / 24
DOM : Gestion des événements
→ Ajouter un gestionnaire d’événements
Inline HTML (déconseillé) :
1 <b utton onclick = " alert ( ' Bouton cliqu é ! ') " > Clique-moi
</b utton >
Avec Propriété DOM :
1 <b utton id = " monBouton " > Cliquez-moi </b utton >
2
3 <script >
4 const bouton = do c um en t .g e tE le m en t By Id ( " monBouton " )
;
5 [Link] = function () {
6 alert ( " Bouton cliqu é via DOM ! " ) ;
7 };
8 </script >
A. Belabed (Univ Tlemcen) 2024-2025 17 / 24
DOM : Gestion des événements
→ Ajouter un gestionnaire d’événements
Avec addEventListener (recommandée)
1 let titre = d oc u me n t. ge t El e me nt B yI d ( " titre " ) ;
2
3 ti t r e . a d d E v e n tL ist en er ( " mouseover " , function () {
4 tit [Link] [Link] = " red " ; // Change la couleur
au survol
5 }) ;
6
7 ti t r e . a d d E v e n tL ist en er ( " mouseout " , function () {
8 tit [Link] [Link] = " black " ; // Remet la couleur
normale en quittant le survol
9 }) ;
A. Belabed (Univ Tlemcen) 2024-2025 18 / 24
DOM : Gestion des événements
L’objet event (ou e) : Quand un événement se déclenche, JavaScript
passe un objet event au gestionnaire. Cet objet contient des
informations utiles sur l’événement.
1 <i nput type = " text " id = " monInput " >
2
3 <script >
4 const input = d oc u me n t. ge t El e me nt B yI d ( " monInput " ) ;
5 i n p u t . a d d E v en tL ist en er ( " keydown " , function ( event ) {
6 [Link] ( " Touche press é e : " , [Link] ) ;
7 }) ;
8 </script >
A. Belabed (Univ Tlemcen) 2024-2025 19 / 24
DOM : Gestion des événements
Empêcher le comportement par défaut :
[Link]()
1 <form id = " monForm " >
2 <i nput type = " text " placeholder = " Entrez quelque
chose " >
3 <b utton type = " submit " > Envoyer </b utton >
4 </form >
5
6 <script >
7 const form = do c um en t .g e tE le m en t By Id ( " monForm " ) ;
8 f o r m . a d d E v e ntLis tene r ( " submit " , function ( event ) {
9 e v e n t . p r e ventDefault () ; // Emp ê che l ' envoi et le
rechargement.
10 alert ( " Formulaire non soumis et non recharger ! " )
;
11 }) ;
12 </script >
A. Belabed (Univ Tlemcen) 2024-2025 20 / 24
DOM : Gestion des événements
Supprimer un événement : removeEventListener()
1 <b utton id = " myBtn " > Clic unique </b utton >
2
3 <script >
4 const myButton = d o cu me n t. g et El e me n tB y Id ( " myBtn " ) ;
5
6 function handleClick () {
7 alert ( ' Clic unique ') ;
8 m y B u t t o n . r e m o v e E v e n t L i s t e n e r ( ' click ' , handleClick
);
9 }
10
11 m y B u t t o n . a d d E v en t L i s t e n e r ( ' click ' , handleClick ) ;
12 </script >
A. Belabed (Univ Tlemcen) 2024-2025 21 / 24
DOM : Gestion des événements
Propagation des événements : Les événements "remontent"
(bubbling) (par défaut) ou "descendent" (capturing) dans le DOM.
1 < div id = " parent " style = " padding:20px; background:
lightblue; " >
2 <b utton id = " btn " > Clique-moi </b utton >
3 </ div >
4
5 <script >
6 d o c u m e n t . g e t El em e nt B yI d ( " btn " ) . addEventListener ( "
click " , function () {
7 alert ( " Bouton cliqu é ! " ) ;
8 }) ;
9 d o c u m e n t . g e t El em e nt B yI d ( " parent " ) . addEventListener (
" click " , function () {
10 alert ( " Div parent cliqu é ! " ) ;
11 }) ;
12 </script >
A. Belabed (Univ Tlemcen) 2024-2025 22 / 24
DOM : Gestion des événements
Propagation des événements : Pour arrêter la propagation, utilisez
[Link]().
1 e nf a n t . a d d E v e n tL i st e ne r ( " click " , function ( event ) {
2 alert ( " Bouton cliqu é ! " ) ;
3 e v e n t . s t o p P ropag atio n () ; // Le parent ne sera pas
notifi é
4 }) ;
A. Belabed (Univ Tlemcen) 2024-2025 23 / 24
DOM : Gestion des événements
Délégation d’événements : Utile pour gérer des éléments
dynamiques ou multiples via un parent commun.
1 <u l id = " liste " >
2 <li > Item 1 </li >
3 <li > Item 2 </li >
4 <li > Item 3 </li >
5 </u l >
6
7 <script >
8 d oc u m e n t . g e t E l em e nt B yI d ( ' liste ') . addEventListener ( '
click ' , function ( e ) {
9 if ( [Link] === ' LI ') {
10 alert ( " Clic sur: " + [Link] ) ;
11 e . t a r g e t . s t y l e . b a c k g r o u n d C o l o r = " lightblue " ;
12 }
13 }) ;
A. Belabed (Univ Tlemcen) 2024-2025 24 / 24