Cours Java Script Dom
Transféré par
losus007Cours Java Script Dom
Transféré par
losus007JavaScript : le DOM
Achref El Mouelhi
Docteur de l’université d’Aix-Marseille
Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel
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="style.css">
</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="http://www.lsis.org/elmouelhia/"> ma page </a>
</p>
<p class=blue name=parConteneur> salut </p>
</div>
<script src="script.js"></script>
</body>
</html>
H & H: Research and Training 11 / 61
Récupérer un élément HTML
JavaScript
Contenu de style.css
.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 script.js
var container = window.document.getElementById("container");
console.log(container.innerHTML);
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 script.js
var container = window.document.getElementById("container");
console.log(container.innerHTML);
H I ©
Ou sans passer par l’objet window U EL
M O
E L
var container = document.getElementById("container");
f
chr e
console.log(container.innerHTML);
© 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 script.js
var container = window.document.getElementById("container");
console.log(container.innerHTML);
H I ©
Ou sans passer par l’objet window U EL
M O
E L
var container = document.getElementById("container");
f
chr e
console.log(container.innerHTML);
© 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 = document.getElementsByTagName("p");
for (let paragraphe of paragraphes) {
console.log(paragraphe.innerHTML);
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 = document.getElementsByTagName("p");
for (let paragraphe of paragraphes) {
console.log(paragraphe.innerHTML);
H I ©
}
U EL
O
f E LM
Ou encore
ch r e
©A
var paragraphes = container.getElementsByTagName("p");
for (let paragraphe of paragraphes) {
console.log(paragraphe.innerHTML);
}
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 = document.getElementsByClassName("blue");
for (let bleu of bleus) {
console.log(bleu.innerHTML);
}
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 = document.getElementsByClassName("blue");
for (let bleu of bleus) {
console.log(bleu.innerHTML);
}
H I ©
Ou aussi
U EL
O
LM
var bleus = container.getElementsByClassName("blue");
for (let bleu of bleus) {
r e f E
ch
console.log(bleu.innerHTML);
©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 = document.getElementsByClassName("blue");
for (let bleu of bleus) {
console.log(bleu.innerHTML);
}
H I ©
Ou aussi
U EL
O
LM
var bleus = container.getElementsByClassName("blue");
for (let bleu of bleus) {
r e f E
ch
console.log(bleu.innerHTML);
©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 = document.getElementsByName("parConteneur");
console.log(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 = document.getElementsByName("parConteneur");
console.log(parConteneurs);
H I ©
U EL
O
Ou aussi
f E LM
r e
ch of parConteneurs) {
© A
for (let parConteneur
console.log(parConteneur.innerHTML);
}
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 = document.querySelectorAll("p.blue");
for (let bleu of pbleus) {
L MO
f E
console.log(bleu.innerHTML);
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 = document.querySelector("p.blue");
console.log(pbleu.innerHTML);
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 = document.querySelector("p.blue");
console.log(pbleu.innerHTML);
H I ©
U EL
O
E
Ceci déclenche une erreur
f LM
ch r e
for (let ©
A
var prouges = document.querySelector("p.red");
rouge of prouges) {
console.log(rouge.innerHTML);
}
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 = document.querySelector(’a’);
U
L MO
E
var href = lien.getAttribute(’href’);
console.log(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 = document.querySelector(’a’);
H I ©
lien.setAttribute(’href’, ’https://www.w3schools.com
U EL
O
LM
’);
r e f E
console.log(lien);
ch
©A
// affiche https://www.w3schools.com
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 = document.querySelector(’a’);
O
lien.removeAttribute(’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 = document.querySelector(’a’);
H I ©
var href = lien.href;
UEL
console.log(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 = document.querySelector(’a’);
H I ©
var href = lien.href;
UEL
console.log(href); O
f E LM
ch r e
©A
Modifier l’attribut d’un élément HTML
lien.href = ’https://www.w3schools.com’;
console.log(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 = document.getElementById("container");
console.log(container.className);
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 = document.getElementById("container");
console.log(container.className);
H I ©
U EL
MO
Modifier une classe d’un élément HTML
E L
container.className = "blue";
f
r e
console.log(container.className);
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 = document.getElementById("container");
console.log(container.className);
H I ©
U EL
MO
Modifier une classe d’un élément HTML
E L
container.className = "blue";
f
r e
console.log(container.className);
ch
© A
Ajouter une nouvelle classe à un élément HTML
container.className += " red";
console.log(container.className);
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 = document.getElementById("container");
var list = container.classList;
console.log(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 = document.getElementById("container");
var list = container.classList;
console.log(list);
H I ©
Ajouter une classe à un élément HTML
U EL
var container = document.getElementById("container"); O
var list = container.classList;
f E LM
list.add(’green’);
console.log(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 = document.getElementById("container");
var list = container.classList;
console.log(list);
H I ©
Ajouter une classe à un élément HTML
U EL
var container = document.getElementById("container"); O
var list = container.classList;
f E LM
list.add(’green’);
console.log(list);
ch r e
© A
Ajouter des classes à un élément HTML
var container = document.getElementById("container");
var list = container.classList;
list.add(’red’,"blue");
console.log(list);
H & H: Research and Training 25 / 61
Quelques raccourcis d’attributs classList
JavaScript
Supprimer une classe d’un élément HTML
list.remove(’red’);
H I ©
console.log(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
list.remove(’red’);
H I ©
console.log(list);
U EL
O
f E LM
ch r e
Supprimer plusieurs classes d’un élément HTML
©A
list.remove(’red’, ’green’);
console.log(list);
H & H: Research and Training 26 / 61
Quelques raccourcis d’attributs classList
JavaScript
Supprimer une classe si elle existe, sinon l’ajouter
list.toggle(’red’);
H I ©
console.log(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
list.toggle(’red’);
H I ©
console.log(list);
U EL
O
f E LM
Remplacer une classe
ch r e
©A
list.replace(’red’, ’blue’);
console.log(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 = document.getElementById("container");
H I ©
console.log(container.innerHTML);
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 = document.getElementById("container");
H I ©
console.log(container.innerHTML);
UEL
O
f E LM
r e
Récupérer le contenu d’un élément HTML (sans les balises)
ch
©A
var container = document.getElementById("container");
console.log(container.textContent);
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 = document.getElementById("container");
container.innerHTML += "<p> hello </p>";
H I ©
EL
console.log(container.innerHTML);
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 = document.getElementById("container");
container.innerHTML += "<p> hello </p>";
H I ©
EL
console.log(container.innerHTML);
O U
f E LM
h r e
Récupérer le contenu d’un élément HTML avec textContent
=c
var container A document.getElementById("container");
©
container.textContent += "<p> hello </p>";
console.log(container.textContent);
console.log(container.innerHTML);
H & H: Research and Training 31 / 61
Modifier les propriétés CSS d’un élément HTML
JavaScript
Modifier la couleur
var container = document.getElementById("container");
container.style.color = "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 = document.getElementById("container");
container.style.color = "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 = document.getElementById("container");
r
container.style.backgroundColor = "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 = document.getElementById("container");
container.style.color = "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 = document.getElementById("container");
r
container.style.backgroundColor = "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 style.backgroundColor
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 = document.getElementById("container");
var parent = container.parentNode;
H I ©
console.log(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 = document.getElementById("container");
var parent = container.parentNode;
H I ©
console.log(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 = document.getElementById("container");
var parent = container.parentNode;
console.log(parent.nodeName);
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 = document.getElementById("container");
var premierFils = container.firstElementChild;
H I ©
console.log(premierFils.nodeName);
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 = document.getElementById("container");
var premierFils = container.firstElementChild;
H I ©
console.log(premierFils.nodeName);
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 = document.getElementById("container");
var dernierFils = container.lastElementChild;
console.log(dernierFils.nodeName);
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 = document.getElementById("container");
var premierFils = container.firstChild;
H I ©
console.log(premierFils.nodeName);
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 = document.getElementById("container");
var premierFils = container.firstChild;
H I ©
console.log(premierFils.nodeName);
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 = document.getElementById("container");
var dernierFils = container.lastChild;
console.log(dernierFils.nodeName);
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 = container.childNodes;
H I ©
EL
for(let enfant of enfants)
console.log(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 = container.childNodes;
H I ©
EL
for(let enfant of enfants)
console.log(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 = container.children;
for(let enfant of enfants)
console.log(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 = document.createElement("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 = document.createElement("p");
Préparer ses attributs [et valeurs]
H I ©
par.id = "intro";
UEL
O
LM
par.setAttribute("class", "blue");
f E
var text = document.createTextNode("JS paragraph");
r e
ch
par.appendChild(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 = document.createElement("p");
Préparer ses attributs [et valeurs]
H I ©
par.id = "intro";
UEL
O
LM
par.setAttribute("class", "blue");
f E
var text = document.createTextNode("JS paragraph");
r e
ch
par.appendChild(text);
©A
Ajouter l’élément au DOM
var container = document.getElementById("container");
container.appendChild(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 = document.createElement("p");
Préparer ses attributs [et valeurs]
H I ©
par.id = "intro";
UEL
O
LM
par.setAttribute("class", "blue");
f E
var text = document.createTextNode("JS paragraph");
r e
ch
par.appendChild(text);
©A
Ajouter l’élément au DOM
var container = document.getElementById("container");
container.appendChild(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 style.css
<!DOCTYPE html> .skyblue {
<html> background-color:
<head> skyblue;
<title> float et clear </title> }
<link rel="stylesheet" href="style.css">
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="script.js"></script>
</body>
ch r e
</html>
Le script script.js
©A
var p = document.getElementById(’first’);
p.insertAdjacentHTML("afterbegin","<p class=skyblue> afterbegin </p>");
p.insertAdjacentHTML("afterend","<p class=pink> afterend </p>");
p.insertAdjacentHTML("beforebegin","<p class=pink> beforebegin </p>");
p.insertAdjacentHTML("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 = document.getElementById("container");
console.log(container.innerHTML);
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 = document.getElementById("container");
console.log(container.innerHTML);
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
console.log(window.container.innerHTML);;
©
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 = document.getElementById("container");
console.log(container.innerHTML);
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
console.log(window.container.innerHTML);;
©
Ou en plus simple
console.log(container.innerHTML);;
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="style.css">
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 onclick="direBonjour()" id=cliquer> cliquer </button>
</div>
<script src="script.js"></script>
</body>
</html>
H & H: Research and Training 49 / 61
Évènements Associer un évènement à un élément
JavaScript
Contenu du script.js
H I ©
function direBonjour(){
U EL
O
LM
var nom = document.getElementById(’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="style.css">
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="script.js"></script>
</body>
</html>
H & H: Research and Training 51 / 61
Évènements Associer un évènement à un élément
JavaScript
Contenu du script.js
var cliquer = document.getElementById(’cliquer’); H I ©
U EL
O
f E LM
cliquer.addEventListener(’click’, function() {
var nom = document.getElementById(’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 = document.getElementById(’cliquer’);
O U
f E LM
cliquer.addEventListener(’click’, function (event) {
console.log(event);
ch r e
var nom = document.getElementById(’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
element.removeEventListener(event, nomFunction);
ch r e
©A
H & H: Research and Training 54 / 61
Évènements Annuler un évènement
JavaScript
Considérons la page index.html suivante
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="style.css">
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="script.js"></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 = document.getElementById(’nom’);
H I ©
U E L (event) {
nom.addEventListener(’keypress’, function
O
MpressedKey
let pressedKey = event.key;
f E
if (pressedKey < ’a’ L|| > ’z’) {
e
chr de tout écrire en minuscule");
event.preventDefault();
© 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 index.html 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" onclick="jaune()">
Parent
<div style="background-color:teal" onclick="vert()">
Fils
</div>
</div>
<script src="script.js"></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");
event.stopPropagation();
}
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");
event.stopPropagation();
}
H I ©
EL
function jaune(){
alert("jaune");
O U
LM
}
r e f E
Une modification danscleh
©A
HTML
<div style="background-color:gold" onclick="jaune()" >
Parent
<div style="background-color:teal" onclick="vert(event)">
Fils
</div>
</div>
H & H: Research and Training 61 / 61
Vous aimerez peut-être aussi
- Partie 3_2 Manipuler les éléments d’une page avec DOM-1Pas encore d'évaluationPartie 3_2 Manipuler les éléments d’une page avec DOM-118 pages
- Glow Up - Prends Soin de Toi PDF | PDFPas encore d'évaluationGlow Up - Prends Soin de Toi PDF | PDF28 pages
- Liste Des Îles de L'océan Atlantique - WikipédiaPas encore d'évaluationListe Des Îles de L'océan Atlantique - Wikipédia21 pages
- Portfolio Issaka Ibrahim Maman NassirouPas encore d'évaluationPortfolio Issaka Ibrahim Maman Nassirou17 pages
- Chap2 Fonctionnement Blockchain GLSI2Pas encore d'évaluationChap2 Fonctionnement Blockchain GLSI227 pages
- Support_Programmation_web_JavaScript_2024-2025[1]Pas encore d'évaluationSupport_Programmation_web_JavaScript_2024-2025[1]37 pages
- BD 3STI-cours-tps 2023 2024+ correctionPas encore d'évaluationBD 3STI-cours-tps 2023 2024+ correction67 pages
- Les Cardinalités Cif/Df: Cycle D'ingénieursPas encore d'évaluationLes Cardinalités Cif/Df: Cycle D'ingénieurs18 pages
- Découvrir Les Principes de Base de DAX Dans Power BI Desktop - Power BI - Microsoft LearnPas encore d'évaluationDécouvrir Les Principes de Base de DAX Dans Power BI Desktop - Power BI - Microsoft Learn11 pages
- Coursdesignpatternmyoussfipartie3decorateur 141207040845 Conversion Gate02Pas encore d'évaluationCoursdesignpatternmyoussfipartie3decorateur 141207040845 Conversion Gate0230 pages
- Balise HTML Toutes Les Différentes Balises HTML - Liste ComplètePas encore d'évaluationBalise HTML Toutes Les Différentes Balises HTML - Liste Complète7 pages
- Mettre en Place Une Veille InformationnellePas encore d'évaluationMettre en Place Une Veille Informationnelle5 pages
- Séries D Exercices Théoriques Et Pratiques 9eme TableurPas encore d'évaluationSéries D Exercices Théoriques Et Pratiques 9eme Tableur20 pages
- M104 ID Fonctionnement D'un Système D'exploitatio 230921 140228Pas encore d'évaluationM104 ID Fonctionnement D'un Système D'exploitatio 230921 140228138 pages
- Tutoriel - Dynamisez Vos Sites Web Avec Javascript !Pas encore d'évaluationTutoriel - Dynamisez Vos Sites Web Avec Javascript !343 pages
- Programmation Web: Réalisé Par: Pr. Mahraz Med Adnane ANNÉE UNIVERSITAIRE:2020/2021Pas encore d'évaluationProgrammation Web: Réalisé Par: Pr. Mahraz Med Adnane ANNÉE UNIVERSITAIRE:2020/202164 pages
- Atelier 1 Mise en Place de L'environnement Du Travail Création D'une Application React & Initiation À JSXPas encore d'évaluationAtelier 1 Mise en Place de L'environnement Du Travail Création D'une Application React & Initiation À JSX5 pages
- 6538346c08b0c5a5f3a4848d MebutawomimufezolimPas encore d'évaluation6538346c08b0c5a5f3a4848d Mebutawomimufezolim2 pages
- Chapitre 8 - Cours de JavaScript - 2020 - 2021 (Compatibility Mode)Pas encore d'évaluationChapitre 8 - Cours de JavaScript - 2020 - 2021 (Compatibility Mode)61 pages
- Coursdesignpatternmyoussfipartie6proxy 141207042434 Conversion Gate02Pas encore d'évaluationCoursdesignpatternmyoussfipartie6proxy 141207042434 Conversion Gate028 pages
- Detection des collisions dans les jeux video 2D: avec C#5, WPF et Visual Studio 2013D'EverandDetection des collisions dans les jeux video 2D: avec C#5, WPF et Visual Studio 2013Pas encore d'évaluation
- PHP & MYSQL : 200 Exercices Corrigés et Projets Pour S’entrainerD'EverandPHP & MYSQL : 200 Exercices Corrigés et Projets Pour S’entrainerPas encore d'évaluation
