[Go to site: main page, start]
Scribd
Importer
134 vues96 pages

Cours Java Script Dom

Transféré par

losus007
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
134 vues96 pages

Cours Java Script Dom

Transféré par

losus007
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

JavaScript : le DOM

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille


Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel

[Link]@[Link]

H & H: Research and Training 1 / 61


Plan

1 Introduction

2 Récupérer un élément HTML


getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
querySelectorAll()
querySelector()

3 Récupérer/modifier l’attribut d’un élément HTML


getAttribute()
setAttribute()
removeAttribute()

H & H: Research and Training 2 / 61


Plan

4 Quelques raccourcis d’attributs


className
classList

5 Récupérer/modifier le contenu d’un élément HTML

6 Modifier les propriétés CSS d’un élément HTML

7 Parent et enfants d’un élément HTML


parentNode
firstElementChild et lastElementChild
firstChild et lastChild
childNodes et children

H & H: Research and Training 3 / 61


Plan

8 Ajouter un nouvel élément HTML

9 Autres opérations sur les éléments HTML

10 Identifiant en JavaScript

11 Évènements
Associer un évènement à un élément
Objet event
Supprimer un évènement
Annuler un évènement
Arrêter la propagation

H & H: Research and Training 4 / 61


Introduction

JavaScript
JavaScript nous permet, via des objets prédéfinis, d’avoir des informations sur

le visiteur

son navigateur

la structure de la page (document) qu’il consulte


H I ©
son écran
U EL
O
LM
...

r e f E
ch
©A

H & H: Research and Training 5 / 61


Introduction

JavaScript
JavaScript nous permet, via des objets prédéfinis, d’avoir des informations sur

le visiteur

son navigateur

la structure de la page (document) qu’il consulte


H I ©
son écran
U EL
O
LM
...

r e f E
ch
©A
window

document location navigator screen

H & H: Research and Training 5 / 61


Introduction

JavaScript

L’objet Window contient

I
quatre autres objets importants : document, location,
H ©
navigator, screen
UEL
O
f E LM
des méthodes basiques comme alert, confirm

r e
les objets comme String, Date, Math...
ch
©A
toute variable, objet... définis par le développeur
...

H & H: Research and Training 6 / 61


Introduction

JavaScript
L’objet document contient
contentType : text/html, text/xml...
toutes les balises HTML constituant le document (DOM)
les attributs et leurs valeurs
H I ©
UEL
... O
f E LM
ch r e
©A

H & H: Research and Training 7 / 61


Introduction

JavaScript
L’objet document contient
contentType : text/html, text/xml...
toutes les balises HTML constituant le document (DOM)
les attributs et leurs valeurs
H I ©
UEL
... O
f E LM
L’objet location contient
ch r e
©A
hostname : localhost...
port : 3000
protocol : http
...
H & H: Research and Training 7 / 61
Introduction

JavaScript
L’objet navigator contient
language : fr FR...
connection : 4G
cookieEnabled : true
H I ©
UEL
...
O
f E LM
ch r e
©A

H & H: Research and Training 8 / 61


Introduction

JavaScript
L’objet navigator contient
language : fr FR...
connection : 4G
cookieEnabled : true
H I ©
UEL
...
O
f E LM
L’objet screen contient
ch r e
height ©A
width
orientation
...
H & H: Research and Training 8 / 61
Introduction

JavaScript
DOM : Document Object Model
Interface de programmation (API) pour les documents XML et
HTML

H I ©
Graphiquement, ça correspond à un arbre dont les nœuds sont
les balises HTML
U EL
Avant standardisation par le L M O
W3C, chaque navigateur avait son
propre DOM.
re f E
c h
© Ascripts pour modifier un document HTML en
Utilisé par les
ajoutant un nœud
modifiant un autre
remplaçant un premier par un deuxième
supprimant un autre

H & H: Research and Training 9 / 61


Récupérer un élément HTML

JavaScript

Plusieurs méthodes pour récupérer un élément HTML


selon l’identifiant : getElementById()
H I ©
U EL
selon le nom de la classe : getElementsByClassName()

L MO
selon le nom de la balise : getElementsByTagName()
r e f E
A ch
selon l’attribut name : getElementsByName()
selon un© sélecteur CSS : querySelectorAll() ou
querySelector()

H & H: Research and Training 10 / 61


Récupérer un élément HTML

Considérons la page HTML suivante


<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale
=1.0">
<title>My JS Page</title>
H I ©
EL
<link rel="stylesheet" href="[Link]">
</head>
O U
<body>
<div id=container>
f E LM
ch r e
Considérons les paragraphes suivants :

©A
<p class=blue name=parConteneur> bonjour </p>
<p class=red name=parConteneur> bonsoir, voici
<a href="[Link] ma page </a>
</p>
<p class=blue name=parConteneur> salut </p>
</div>
<script src="[Link]"></script>
</body>

</html>
H & H: Research and Training 11 / 61
Récupérer un élément HTML

JavaScript

Contenu de [Link]
.red {

}
color: red;
H I ©
UEL
O
.blue {
color: blue;
f E LM
}
ch r e
© A
.green {
color: green;
}

H & H: Research and Training 12 / 61


Récupérer un élément HTML getElementById()

JavaScript

Récupérer un élément selon son id, on ajoute dans [Link]

var container = [Link]("container");


[Link]([Link]);

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 13 / 61


Récupérer un élément HTML getElementById()

JavaScript

Récupérer un élément selon son id, on ajoute dans [Link]

var container = [Link]("container");


[Link]([Link]);

H I ©
Ou sans passer par l’objet window U EL
M O
E L
var container = [Link]("container");
f
chr e
[Link]([Link]);

© A

H & H: Research and Training 13 / 61


Récupérer un élément HTML getElementById()

JavaScript

Récupérer un élément selon son id, on ajoute dans [Link]

var container = [Link]("container");


[Link]([Link]);

H I ©
Ou sans passer par l’objet window U EL
M O
E L
var container = [Link]("container");
f
chr e
[Link]([Link]);

© A
Remarque

Il ne faut pas utiliser # dans getElementById().

H & H: Research and Training 13 / 61


Récupérer un élément HTML getElementsByTagName()

JavaScript

Récupérer des éléments selon le nom de la balise


var paragraphes = [Link]("p");

for (let paragraphe of paragraphes) {


[Link]([Link]);
H I ©
}
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 14 / 61


Récupérer un élément HTML getElementsByTagName()

JavaScript

Récupérer des éléments selon le nom de la balise


var paragraphes = [Link]("p");

for (let paragraphe of paragraphes) {


[Link]([Link]);
H I ©
}
U EL
O
f E LM
Ou encore
ch r e
©A
var paragraphes = [Link]("p");

for (let paragraphe of paragraphes) {


[Link]([Link]);
}

H & H: Research and Training 14 / 61


Récupérer un élément HTML getElementsByClassName()

Récupérer un élément selon sa classe

var bleus = [Link]("blue");

for (let bleu of bleus) {


[Link]([Link]);
}

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 15 / 61


Récupérer un élément HTML getElementsByClassName()

Récupérer un élément selon sa classe

var bleus = [Link]("blue");

for (let bleu of bleus) {


[Link]([Link]);
}

H I ©
Ou aussi
U EL
O
LM
var bleus = [Link]("blue");

for (let bleu of bleus) {


r e f E
ch
[Link]([Link]);

©A
}

H & H: Research and Training 15 / 61


Récupérer un élément HTML getElementsByClassName()

Récupérer un élément selon sa classe

var bleus = [Link]("blue");

for (let bleu of bleus) {


[Link]([Link]);
}

H I ©
Ou aussi
U EL
O
LM
var bleus = [Link]("blue");

for (let bleu of bleus) {


r e f E
ch
[Link]([Link]);

©A
}

Remarque

Il ne faut pas utiliser . dans getElementsByClassName().

H & H: Research and Training 15 / 61


Récupérer un élément HTML getElementsByName()

JavaScript

Récupérer un élément selon la valeur de son attribut name

var parConteneurs = [Link]("parConteneur");


[Link](parConteneurs);
H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 16 / 61


Récupérer un élément HTML getElementsByName()

JavaScript

Récupérer un élément selon la valeur de son attribut name

var parConteneurs = [Link]("parConteneur");


[Link](parConteneurs);
H I ©
U EL
O
Ou aussi
f E LM
r e
ch of parConteneurs) {
© A
for (let parConteneur
[Link]([Link]);
}

H & H: Research and Training 16 / 61


Récupérer un élément HTML querySelectorAll()

JavaScript

H I ©
Récupérer un élément selon un sélecteur CSS 3

U E L
var pbleus = [Link]("[Link]");
for (let bleu of pbleus) {
L MO
f E
[Link]([Link]);
r e
}
A ch
©

H & H: Research and Training 17 / 61


Récupérer un élément HTML querySelector()

JavaScript

Récupérer le premier élément selon un sélecteur CSS 3


var pbleu = [Link]("[Link]");
[Link]([Link]);
H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 18 / 61


Récupérer un élément HTML querySelector()

JavaScript

Récupérer le premier élément selon un sélecteur CSS 3


var pbleu = [Link]("[Link]");
[Link]([Link]);
H I ©
U EL
O
E
Ceci déclenche une erreur
f LM
ch r e
for (let ©
A
var prouges = [Link]("[Link]");
rouge of prouges) {
[Link]([Link]);
}

H & H: Research and Training 18 / 61


Récupérer/modifier l’attribut d’un élément HTML getAttribute()

JavaScript

Récupérer l’attribut d’un élément HTML


H I ©
EL
var lien = [Link](’a’);
U
L MO
E
var href = [Link](’href’);
[Link](href);ref
A ch
©

H & H: Research and Training 19 / 61


Récupérer/modifier l’attribut d’un élément HTML setAttribute()

JavaScript

Récupérer l’attribut d’un élément HTML


var lien = [Link](’a’);
H I ©
[Link](’href’, ’[Link]
U EL
O
LM
’);

r e f E
[Link](lien);
ch
©A
// affiche [Link]

H & H: Research and Training 20 / 61


Récupérer/modifier l’attribut d’un élément HTML removeAttribute()

JavaScript

Supprimer l’attribut d’un élément HTML H I ©


U EL
var lien = [Link](’a’);
O
[Link](’href’);
f E LM
ch r e
©A

H & H: Research and Training 21 / 61


Quelques raccourcis d’attributs

JavaScript

Pour certains attributs comme href, on peut accéder directement


à la valeur via son nom
var lien = [Link](’a’);
H I ©
var href = [Link];
UEL
[Link](href); O
f E LM
ch r e
©A

H & H: Research and Training 22 / 61


Quelques raccourcis d’attributs

JavaScript

Pour certains attributs comme href, on peut accéder directement


à la valeur via son nom
var lien = [Link](’a’);
H I ©
var href = [Link];
UEL
[Link](href); O
f E LM
ch r e
©A
Modifier l’attribut d’un élément HTML
[Link] = ’[Link]
[Link](lien);

H & H: Research and Training 22 / 61


Quelques raccourcis d’attributs

JavaScript

Remarque

Les attributs class et for sont des mots-clés réservés en


JavaScript, on ne peut donc les utiliser pour modifier leurs valeurs
H I ©
HTML.
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 23 / 61


Quelques raccourcis d’attributs

JavaScript

Remarque

Les attributs class et for sont des mots-clés réservés en


JavaScript, on ne peut donc les utiliser pour modifier leurs valeurs
H I ©
HTML.
UEL
O
f E LM
ch r e
Solution
© A
Utiliser className ou classList pour l’attribut class
Et forHtml pour l’attribut for

H & H: Research and Training 23 / 61


Quelques raccourcis d’attributs className

JavaScript

Récupérer la classe d’un élément HTML


var container = [Link]("container");
[Link]([Link]);

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 24 / 61


Quelques raccourcis d’attributs className

JavaScript

Récupérer la classe d’un élément HTML


var container = [Link]("container");
[Link]([Link]);

H I ©
U EL
MO
Modifier une classe d’un élément HTML

E L
[Link] = "blue";
f
r e
[Link]([Link]);
ch
© A

H & H: Research and Training 24 / 61


Quelques raccourcis d’attributs className

JavaScript

Récupérer la classe d’un élément HTML


var container = [Link]("container");
[Link]([Link]);

H I ©
U EL
MO
Modifier une classe d’un élément HTML

E L
[Link] = "blue";
f
r e
[Link]([Link]);
ch
© A
Ajouter une nouvelle classe à un élément HTML
[Link] += " red";
[Link]([Link]);

H & H: Research and Training 24 / 61


Quelques raccourcis d’attributs classList

JavaScript
Récupérer la liste des classes d’un élément HTML
var container = [Link]("container");
var list = [Link];
[Link](list);

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 25 / 61


Quelques raccourcis d’attributs classList

JavaScript
Récupérer la liste des classes d’un élément HTML
var container = [Link]("container");
var list = [Link];
[Link](list);

H I ©
Ajouter une classe à un élément HTML
U EL
var container = [Link]("container"); O
var list = [Link];
f E LM
[Link](’green’);
[Link](list);
ch r e
©A

H & H: Research and Training 25 / 61


Quelques raccourcis d’attributs classList

JavaScript
Récupérer la liste des classes d’un élément HTML
var container = [Link]("container");
var list = [Link];
[Link](list);

H I ©
Ajouter une classe à un élément HTML
U EL
var container = [Link]("container"); O
var list = [Link];
f E LM
[Link](’green’);
[Link](list);
ch r e
© A
Ajouter des classes à un élément HTML
var container = [Link]("container");
var list = [Link];
[Link](’red’,"blue");
[Link](list);

H & H: Research and Training 25 / 61


Quelques raccourcis d’attributs classList

JavaScript

Supprimer une classe d’un élément HTML


[Link](’red’);
H I ©
[Link](list);
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 26 / 61


Quelques raccourcis d’attributs classList

JavaScript

Supprimer une classe d’un élément HTML


[Link](’red’);
H I ©
[Link](list);
U EL
O
f E LM
ch r e
Supprimer plusieurs classes d’un élément HTML

©A
[Link](’red’, ’green’);
[Link](list);

H & H: Research and Training 26 / 61


Quelques raccourcis d’attributs classList

JavaScript

Supprimer une classe si elle existe, sinon l’ajouter


[Link](’red’);
H I ©
[Link](list);
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 27 / 61


Quelques raccourcis d’attributs classList

JavaScript

Supprimer une classe si elle existe, sinon l’ajouter


[Link](’red’);
H I ©
[Link](list);
U EL
O
f E LM
Remplacer une classe
ch r e
©A
[Link](’red’, ’blue’);
[Link](list);

H & H: Research and Training 27 / 61


Quelques raccourcis d’attributs classList

JavaScript

Autres méthodes de classList

H I ©
EL
length : retourne le nombre de classes.

O U
LM
contains(classe) : retourne true si classe appartient à
classList, false sinon.
r e f E
A ch la classe d’indice i si i est inférieur à la
item(i) : retourne
©de la liste, null sinon.
longueur

H & H: Research and Training 28 / 61


Quelques raccourcis d’attributs classList

JavaScript

Les attributs d’un formulaire

H I ©
value : pour récupérer la valeur saisie dans une zone de saisie
EL
(input, textarea...)
M OU
checked : pour déterminer
f E Lune case à cocher ou un bouton
si
radio a été cochéh
c r
ou e
non (true ou false)
... ©A

H & H: Research and Training 29 / 61


Récupérer/modifier le contenu d’un élément HTML

JavaScript

Récupérer le contenu d’un élément HTML (y compris les balises)


var container = [Link]("container");
H I ©
[Link]([Link]);
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 30 / 61


Récupérer/modifier le contenu d’un élément HTML

JavaScript

Récupérer le contenu d’un élément HTML (y compris les balises)


var container = [Link]("container");
H I ©
[Link]([Link]);
UEL
O
f E LM
r e
Récupérer le contenu d’un élément HTML (sans les balises)
ch
©A
var container = [Link]("container");
[Link]([Link]);

H & H: Research and Training 30 / 61


Récupérer/modifier le contenu d’un élément HTML

JavaScript

Modifier le contenu d’un élément HTML avec innerHTML


var container = [Link]("container");
[Link] += "<p> hello </p>";
H I ©
EL
[Link]([Link]);

O U
f E LM
ch r e
©A

H & H: Research and Training 31 / 61


Récupérer/modifier le contenu d’un élément HTML

JavaScript

Modifier le contenu d’un élément HTML avec innerHTML


var container = [Link]("container");
[Link] += "<p> hello </p>";
H I ©
EL
[Link]([Link]);

O U
f E LM
h r e
Récupérer le contenu d’un élément HTML avec textContent
=c
var container A [Link]("container");
©
[Link] += "<p> hello </p>";
[Link]([Link]);
[Link]([Link]);

H & H: Research and Training 31 / 61


Modifier les propriétés CSS d’un élément HTML

JavaScript
Modifier la couleur
var container = [Link]("container");
[Link] = "red";

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 32 / 61


Modifier les propriétés CSS d’un élément HTML

JavaScript
Modifier la couleur
var container = [Link]("container");
[Link] = "red";

H I ©
U ELséparés par -, il faut
Pour les propriétés CSS composées de deux mots

M O
supprimer - mettre la propriété en camelCase

f E L
ch e
var container = [Link]("container");
r
[Link] = "red";

© A

H & H: Research and Training 32 / 61


Modifier les propriétés CSS d’un élément HTML

JavaScript
Modifier la couleur
var container = [Link]("container");
[Link] = "red";

H I ©
U ELséparés par -, il faut
Pour les propriétés CSS composées de deux mots

M O
supprimer - mettre la propriété en camelCase

f E L
ch e
var container = [Link]("container");
r
[Link] = "red";

© A
Remarque
Un élément HTML, ayant classe red qui modifie la couleur de fond en rouge,
n’a pas forcément la valeur red attribuée au [Link]

H & H: Research and Training 32 / 61


Parent et enfants d’un élément HTML parentNode

JavaScript

Récupérer le parent d’un élément HTML (l’objet)


var container = [Link]("container");
var parent = [Link];
H I ©
[Link](parent);
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 33 / 61


Parent et enfants d’un élément HTML parentNode

JavaScript

Récupérer le parent d’un élément HTML (l’objet)


var container = [Link]("container");
var parent = [Link];
H I ©
[Link](parent);
U EL
O
f E LM
ch r e
Récupérer le parent d’un élément HTML (le nom)

©A
var container = [Link]("container");
var parent = [Link];
[Link]([Link]);

H & H: Research and Training 33 / 61


Parent et enfants d’un élément HTML firstElementChild et lastElementChild

JavaScript

Récupérer le premier élément fils d’un élément HTML


var container = [Link]("container");
var premierFils = [Link];
H I ©
[Link]([Link]);
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 34 / 61


Parent et enfants d’un élément HTML firstElementChild et lastElementChild

JavaScript

Récupérer le premier élément fils d’un élément HTML


var container = [Link]("container");
var premierFils = [Link];
H I ©
[Link]([Link]);
U EL
O
f E LM
ch r e
Récupérer le dernier élément fils d’un élément HTML

©A
var container = [Link]("container");
var dernierFils = [Link];
[Link]([Link]);

H & H: Research and Training 34 / 61


Parent et enfants d’un élément HTML firstChild et lastChild

JavaScript

Récupérer le premier fils (élément, texte ou autre) d’un élément HTML


var container = [Link]("container");
var premierFils = [Link];
H I ©
[Link]([Link]);
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 35 / 61


Parent et enfants d’un élément HTML firstChild et lastChild

JavaScript

Récupérer le premier fils (élément, texte ou autre) d’un élément HTML


var container = [Link]("container");
var premierFils = [Link];
H I ©
[Link]([Link]);
U EL
O
f E LM
ch r e
Récupérer le dernier fils (élément, texte ou autre) d’un élément HTML

©A
var container = [Link]("container");
var dernierFils = [Link];
[Link]([Link]);

H & H: Research and Training 35 / 61


Parent et enfants d’un élément HTML childNodes et children

JavaScript

Récupérer tous les enfants (élément, texte ou autre) d’un élément


HTML
var enfants = [Link];
H I ©
EL
for(let enfant of enfants)
[Link](enfant);
O U
f E LM
ch r e
©A

H & H: Research and Training 36 / 61


Parent et enfants d’un élément HTML childNodes et children

JavaScript

Récupérer tous les enfants (élément, texte ou autre) d’un élément


HTML
var enfants = [Link];
H I ©
EL
for(let enfant of enfants)
[Link](enfant);
O U
f E LM
r e
célhéments enfants d’un élément HTML
A
Récupérer tous les
©
var enfants = [Link];
for(let enfant of enfants)
[Link](enfant);

H & H: Research and Training 36 / 61


Parent et enfants d’un élément HTML childNodes et children

JavaScript

Enfants suivant et précédent


previousSibling
nextSibling
H I ©
U EL
previousElementSibling
O
nextElementSibling
f E LM
ch r e
©A

H & H: Research and Training 37 / 61


Parent et enfants d’un élément HTML childNodes et children

JavaScript

Enfants suivant et précédent


previousSibling
nextSibling
H I ©
U EL
previousElementSibling
O
nextElementSibling
f E LM
ch r e
©A
Attention
À chaque appel d’une de méthodes précédentes, le pointeur passe à
l’élément suivant (ou précédent).

H & H: Research and Training 37 / 61


Ajouter un nouvel élément HTML

JavaScript

Étapes
H I ©
Créer l’élément UEL
L MO
r e f E
Préparer ses attributs [et valeurs]

ch
L’ajouter au document
A
©

H & H: Research and Training 38 / 61


Ajouter un nouvel élément HTML

JavaScript
Créer un élément de type p
var par = [Link]("p");

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 39 / 61


Ajouter un nouvel élément HTML

JavaScript
Créer un élément de type p
var par = [Link]("p");

Préparer ses attributs [et valeurs]


H I ©
[Link] = "intro";
UEL
O
LM
[Link]("class", "blue");

f E
var text = [Link]("JS paragraph");
r e
ch
[Link](text);

©A

H & H: Research and Training 39 / 61


Ajouter un nouvel élément HTML

JavaScript
Créer un élément de type p
var par = [Link]("p");

Préparer ses attributs [et valeurs]


H I ©
[Link] = "intro";
UEL
O
LM
[Link]("class", "blue");

f E
var text = [Link]("JS paragraph");
r e
ch
[Link](text);

©A
Ajouter l’élément au DOM
var container = [Link]("container");
[Link](par);

H & H: Research and Training 39 / 61


Ajouter un nouvel élément HTML

JavaScript
Créer un élément de type p
var par = [Link]("p");

Préparer ses attributs [et valeurs]


H I ©
[Link] = "intro";
UEL
O
LM
[Link]("class", "blue");

f E
var text = [Link]("JS paragraph");
r e
ch
[Link](text);

©A
Ajouter l’élément au DOM
var container = [Link]("container");
[Link](par);

appendChild() ajoute l’élément comme dernier fils de conteneur


H & H: Research and Training 39 / 61
Ajouter un nouvel élément HTML

JavaScript

H I ©
On peut aussi utiliser
UEL
O
LM
.insertBefore(newnode, existingnode) : pour insérer
newnode avant existingnode
r e f E
ch
©A

H & H: Research and Training 40 / 61


Ajouter un nouvel élément HTML

JavaScript

La méthode insertAdjacentHTML(position, text)


permet d’insérer un texte HTML (text), dans une position spécifiée
H I ©
(position)
UEL
O
afterbegin,
f E LM
afterend,
ch r e
beforebegin, ©A
beforeend.

H & H: Research and Training 41 / 61


Ajouter un nouvel élément HTML

JavaScript
Exemple : HTML Le fichier [Link]

<!DOCTYPE html> .skyblue {


<html> background-color:
<head> skyblue;
<title> float et clear </title> }
<link rel="stylesheet" href="[Link]">
I
.pink {
H ©
EL
</head> background-color: pink;
<body> }
<p id=first>
O U
.green {
bonjour
</p>
f E LM }
background-color: green;

<script src="[Link]"></script>
</body>
ch r e
</html>

Le script [Link]
©A
var p = [Link](’first’);
[Link]("afterbegin","<p class=skyblue> afterbegin </p>");
[Link]("afterend","<p class=pink> afterend </p>");
[Link]("beforebegin","<p class=pink> beforebegin </p>");
[Link]("beforeend","<p class=skyblue> beforeend </p>");

H & H: Research and Training 42 / 61


Ajouter un nouvel élément HTML

JavaScript
Le résultat

beforebegin

H I ©
afterbegin
UEL
O
f E LM
ch r e bonjour

©A beforeend

afterend

H & H: Research and Training 43 / 61


Autres opérations sur les éléments HTML

JavaScript

Quelques opérations
replaceChild : pour remplacer un nœud H I ©
UEL
cloneNode() : pour cloner un nœud O
f E LM
ch r e
removeChild() : pour supprimer un nœud fils

©A
hasChildNodes() : pour vérifier l’existence d’au moins un
nœud enfant

H & H: Research and Training 44 / 61


Identifiant en JavaScript

JavaScript
Pour récupérer un élément selon son id, une solution possible consite à utiliser
la méthode getElementById()

var container = [Link]("container");


[Link]([Link]);

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 45 / 61


Identifiant en JavaScript

JavaScript
Pour récupérer un élément selon son id, une solution possible consite à utiliser
la méthode getElementById()

var container = [Link]("container");


[Link]([Link]);

H I ©
UEL
O
LM
Tous les éléments HTML ayant un identifiant seront chargés dans l’espace

getElementById())
r e E
global, donc on peut directement faire (sans avoir besoin d’utiliser
f
A ch
[Link]([Link]);;
©

H & H: Research and Training 45 / 61


Identifiant en JavaScript

JavaScript
Pour récupérer un élément selon son id, une solution possible consite à utiliser
la méthode getElementById()

var container = [Link]("container");


[Link]([Link]);

H I ©
UEL
O
LM
Tous les éléments HTML ayant un identifiant seront chargés dans l’espace

getElementById())
r e E
global, donc on peut directement faire (sans avoir besoin d’utiliser
f
A ch
[Link]([Link]);;
©
Ou en plus simple

[Link]([Link]);;

H & H: Research and Training 45 / 61


Identifiant en JavaScript

JavaScript

H I ©
Remarque
UEL
O
LM
Pour éviter les conflits avec des éventuelles variables ou fonctions
f E
portant le même nom, il est conseillé d’utiliser getElementById().
r e
ch
©A

H & H: Research and Training 46 / 61


Évènements

JavaScript

Quelques évènements

click et dblclick : clic et double clic

mouseover, mouseout, mousedown, mouseup et mousemove : mouvement de


la souris
H I ©
keyup, keydown et keypress : touches de clavierEL

focus et blur : ciblage et annulation M


OU
f E L de ciblage

c h r
change, input et select e : pour les éléments d’un formulaire

reset et©
A
submit : pour la ré-initialisation et la soumission de formulaire

load : chargement de la fenêtre

scroll : évènement lié au mouvement du scroll

...

H & H: Research and Training 47 / 61


Évènements Associer un évènement à un élément

JavaScript

Deux façons différentes pour installer un écouteur d’évènement


H I ©
comme attribut d’une balise HTML en précédant le nom
U EL
O
d’évènement par le préfixe on ayant comme valeur le nom d’une
fonction JavaScript
f E LM
ch r e
dans le fichier JavaScript avec la méthode
©A
addEventListener()

H & H: Research and Training 48 / 61


Évènements Associer un évènement à un élément

JavaScript
Première méthode (la page HTML)

<!DOCTYPE html>
<html lang="fr">

<head>
<link rel="stylesheet" href="[Link]">
H I ©
EL
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale
=1.0">
O U
<title>Event Test</title>
</head>
f E LM
ch r e
©A
<body>
<div id=container>
<input type=text id=nom>
<button id=cliquer> cliquer </button>
</div>
<script src="[Link]"></script>
</body>

</html>

H & H: Research and Training 49 / 61


Évènements Associer un évènement à un élément

JavaScript

Contenu du [Link]
H I ©
function direBonjour(){
U EL
O
LM
var nom = [Link](’nom’).value;
alert ("Bonjour " + nom);
r e f E
}
ch
©A

H & H: Research and Training 50 / 61


Évènements Associer un évènement à un élément

JavaScript
Première méthode (la page HTML)

<!DOCTYPE html>
<html lang="fr">

<head>
<link rel="stylesheet" href="[Link]">
H I ©
EL
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale
=1.0">
O U
<title>Event Test</title>
</head>
f E LM
ch r e
©A
<body>
<div id=container>
<input type=text id=nom>
<button id=cliquer> cliquer </button>
</div>
<script src="[Link]"></script>
</body>

</html>

H & H: Research and Training 51 / 61


Évènements Associer un évènement à un élément

JavaScript

Contenu du [Link]
var cliquer = [Link](’cliquer’); H I ©
U EL
O
f E LM
[Link](’click’, function() {
var nom = [Link](’nom’).value;
alert ("Bonjour " + nom);
ch r e
});
©A

H & H: Research and Training 52 / 61


Évènements Objet event

JavaScript

L’objet event permet de récupérer des données sur l’évènement


(rien à modifier dans le HTML)
H I ©
EL
var cliquer = [Link](’cliquer’);

O U
f E LM
[Link](’click’, function (event) {
[Link](event);
ch r e
var nom = [Link](’nom’).value;

});
©A
alert("Bonjour " + nom);

H & H: Research and Training 53 / 61


Évènements Supprimer un évènement

JavaScript

H I ©
Pour supprimer un évènement associé à un élément HTML
U EL
O
f E LM
[Link](event, nomFunction);

ch r e
©A

H & H: Research and Training 54 / 61


Évènements Annuler un évènement

JavaScript
Considérons la page [Link] suivante

<!DOCTYPE html>
<html lang="fr">

<head>
<link rel="stylesheet" href="[Link]">
H I ©
EL
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale
=1.0">
O U
<title>Prevent event</title>
</head>
f E LM
ch r e
©A
<body>
<div>
Saisir seulement des caractères alphabétiques en minuscule :
<input type="text" id="nom">
</div>
<script src="[Link]"></script>
</body>

</html>

H & H: Research and Training 55 / 61


Évènements Annuler un évènement

JavaScript

Pour annuler une saisie qui n’est pas en minuscule


let nom = [Link](’nom’);
H I ©
U E L (event) {
[Link](’keypress’, function
O
MpressedKey
let pressedKey = [Link];

f E
if (pressedKey < ’a’ L|| > ’z’) {
e
chr de tout écrire en minuscule");
[Link]();

© A
alert("Merci
}
});

H & H: Research and Training 56 / 61


Évènements Annuler un évènement

JavaScript

On ne peut annuler que certains évènements


saisir un texte
H I ©
U EL
cliquer sur une case à cocher
O
soumettre un formulaire
f E LM
ch r e
© A
cliquer sur un lien
glisser un élément (drag and drop)

H & H: Research and Training 57 / 61


Évènements Arrêter la propagation

JavaScript
Considérons la page [Link] suivante

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stop propagation</title>
H I ©
EL
<style>
div {
padding: 50px;
O U
LM
cursor: pointer;
}
</style>
</head>
r e f E
ch
©A
<body>
<div style="background-color:gold" > Parent
<div style="background-color:teal" > Fils
</div>
</div>
<script src="[Link]"></script>
</body>

</html>

H & H: Research and Training 58 / 61


Évènements Arrêter la propagation

Les deux div parent et fils

Parent

Fils

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 59 / 61


Évènements Arrêter la propagation

Les deux div parent et fils

Parent

Fils

H I ©
U EL
O
f E LM
ch r e
©A
Code JavaScript de vert() et jaune()
function vert(){
alert("vert");
}
function jaune(){
alert("jaune");
}

H & H: Research and Training 59 / 61


Évènements Arrêter la propagation

JavaScript

Constats
En cliquant sur le jaune, jaune est affiché
H I ©
U ELés
En cliquant sur le vert, jaune et vert sont affich

L MO
r e f E
A ch
©

H & H: Research and Training 60 / 61


Évènements Arrêter la propagation

JavaScript

Constats
En cliquant sur le jaune, jaune est affiché
H I ©
U ELés
En cliquant sur le vert, jaune et vert sont affich

L MO
r e f E
A ch
Solution ©
Utiliser la méthode stopPropagation

H & H: Research and Training 60 / 61


Évènements Arrêter la propagation

JavaScript
Nouveau code de la fonction vert() (pas de changement pour jaune())
function vert(event){
alert("vert");
[Link]();
}

H I ©
EL
function jaune(){
alert("jaune");
O U
LM
}

r e f E
ch
©A

H & H: Research and Training 61 / 61


Évènements Arrêter la propagation

JavaScript
Nouveau code de la fonction vert() (pas de changement pour jaune())
function vert(event){
alert("vert");
[Link]();
}

H I ©
EL
function jaune(){
alert("jaune");
O U
LM
}

r e f E
Une modification danscleh
©A
HTML
<div style="background-color:gold" >
Parent
<div style="background-color:teal" > Fils
</div>
</div>

H & H: Research and Training 61 / 61

Vous aimerez peut-être aussi