Cours Java Script Dom

JavaScript : le DOM
Achref El Mouelhi
Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel
[email protected]
H & H: Research and Training 1 / 61

Plan
1 Introduction
2 Récupérer un élément HTML

getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
querySelectorAll()
querySelector()
3 Récupérer/modifier l’attribut d’un élément HTML

getAttribute()
setAttribute()
removeAttribute()

Plan
4 Quelques raccourcis d’attributs

className
classList
5 Récupérer/modifier le contenu d’un élément HTML
6 Modifier les propriétés CSS d’un élément HTML
7 Parent et enfants d’un élément HTML

parentNode
firstElementChild et lastElementChild
firstChild et lastChild
childNodes et children

Plan
8 Ajouter un nouvel élément HTML
9 Autres opérations sur les éléments HTML
10 Identifiant en JavaScript
11 Évènements
Associer un évènement à un élément
Objet event
Supprimer un évènement
Annuler un évènement
Arrêter la propagation

Introduction
JavaScript
JavaScript nous permet, via des objets prédéfinis, d’avoir des informations sur
le visiteur
son navigateur
la structure de la page (document) qu’il consulte

H I ©
son écran
U EL
O
LM
...
r e f E
ch
©A

Introduction
JavaScript
JavaScript nous permet, via des objets prédéfinis, d’avoir des informations sur
le visiteur
son navigateur
la structure de la page (document) qu’il consulte

H I ©
son écran
U EL
O
LM
...
r e f E
ch
©A
window
document location navigator screen

Introduction
JavaScript
L’objet Window contient
I
quatre autres objets importants : document, location,
H ©
navigator, screen
UEL
O
f E LM
des méthodes basiques comme alert, confirm
r e
les objets comme String, Date, Math...
ch
©A
toute variable, objet... définis par le développeur
...

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

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
...
Introduction
JavaScript
L’objet navigator contient
language : fr FR...
connection : 4G
cookieEnabled : true
H I ©
UEL
...
O
f E LM
ch r e
©A

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
...
Introduction
JavaScript
DOM : Document Object Model
Interface de programmation (API) pour les documents XML et
HTML
H I ©
Graphiquement, ça correspond à 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
Utilisé par les
ajoutant un nœud
modifiant un autre
remplaçant un premier par un deuxième
supprimant un autre

Récupérer un élément HTML
JavaScript
Plusieurs méthodes pour récupérer un élé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© sélecteur CSS : querySelectorAll() ou
querySelector()

Considé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
Considé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>
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;
}

Récupérer un élément HTML getElementById()
JavaScript
Récupérer un élé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

JavaScript

H I ©
Ou sans passer par l’objet window U EL
M O
E L
var container = document.getElementById("container");
f
chr e
© A

JavaScript

H I ©
Ou sans passer par l’objet window U EL
M O
E L
f
chr e
© A
Remarque
Il ne faut pas utiliser # dans getElementById().

Récupérer un élément HTML getElementsByTagName()
JavaScript
Récupérer des élé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

Récupérer un élément HTML getElementsByTagName()
JavaScript
Récupérer des éléments selon le nom de la balise

var paragraphes = document.getElementsByTagName("p");

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

}

Récupérer un élément HTML getElementsByClassName()
Récupérer un élé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 I ©
Ou aussi
U EL
O
LM
var bleus = container.getElementsByClassName("blue");

r e f E
ch
©A
}


}
H I ©
Ou aussi
U EL
O
LM
var bleus = container.getElementsByClassName("blue");

r e f E
ch
©A
}
Remarque
Il ne faut pas utiliser . dans getElementsByClassName().

Récupérer un élément HTML getElementsByName()
JavaScript
Récupérer un élé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

Récupérer un élément HTML getElementsByName()
JavaScript
Récupérer un élé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);
}

Récupérer un élément HTML querySelectorAll()
JavaScript
H I ©
Récupérer un élément selon un sélecteur CSS 3
U E L
var pbleus = document.querySelectorAll("p.blue");
for (let bleu of pbleus) {
L MO
f E
r e
}
A ch
©

Récupérer un élément HTML querySelector()
JavaScript
Récupérer le premier élément selon un sé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

Récupérer un élément HTML querySelector()
JavaScript
Récupérer le premier élément selon un sélecteur CSS 3

var pbleu = document.querySelector("p.blue");
console.log(pbleu.innerHTML);
H I ©
U EL
O
E
Ceci déclenche une erreur
f LM
ch r e
for (let ©
A
var prouges = document.querySelector("p.red");
rouge of prouges) {
console.log(rouge.innerHTML);
}

Récupérer/modifier l’attribut d’un élément HTML getAttribute()
JavaScript
Récupérer l’attribut d’un élé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
©

Récupérer/modifier l’attribut d’un élément HTML setAttribute()
JavaScript
Récupérer l’attribut d’un élément HTML

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

Récupérer/modifier l’attribut d’un élément HTML removeAttribute()
JavaScript
Supprimer l’attribut d’un élément HTML H I ©

U EL
O
lien.removeAttribute(’href’);
f E LM
ch r e
©A

Quelques raccourcis d’attributs
JavaScript
Pour certains attributs comme href, on peut accéder directement

à la valeur via son nom
H I ©
var href = lien.href;
UEL
console.log(href); O
f E LM
ch r e
©A

JavaScript
Pour certains attributs comme href, on peut accéder directement

à la valeur via son nom
H I ©
var href = lien.href;
UEL
console.log(href); O
f E LM
ch r e
©A
Modifier l’attribut d’un élément HTML
lien.href = ’https://www.w3schools.com’;
console.log(lien);

JavaScript
Remarque
Les attributs class et for sont des mots-clés réservé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

JavaScript
Remarque
Les attributs class et for sont des mots-clés réservé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

Quelques raccourcis d’attributs className
JavaScript
Récupérer la classe d’un élément HTML

console.log(container.className);
H I ©
U EL
O
f E LM
ch r e
©A

JavaScript

H I ©
U EL
MO
Modifier une classe d’un élément HTML
E L
container.className = "blue";
f
r e
ch
© A

JavaScript

H I ©
U EL
MO
Modifier une classe d’un élément HTML
E L
container.className = "blue";
f
r e
ch
© A
Ajouter une nouvelle classe à un élément HTML
container.className += " red";

Quelques raccourcis d’attributs classList
JavaScript
Récupérer la liste des classes d’un élément HTML
var list = container.classList;
console.log(list);
H I ©
U EL
O
f E LM
ch r e
©A

JavaScript
console.log(list);
H I ©
Ajouter une classe à un élément HTML
U EL
var container = document.getElementById("container"); O
f E LM
list.add(’green’);
console.log(list);
ch r e
©A

JavaScript
console.log(list);
H I ©
Ajouter une classe à un élément HTML
U EL
var container = document.getElementById("container"); O
f E LM
list.add(’green’);
console.log(list);
ch r e
© A
Ajouter des classes à un élément HTML
list.add(’red’,"blue");
console.log(list);

JavaScript
Supprimer une classe d’un élément HTML

list.remove(’red’);
H I ©
console.log(list);
U EL
O
f E LM
ch r e
©A

JavaScript
Supprimer une classe d’un élément HTML

list.remove(’red’);
H I ©
console.log(list);
U EL
O
f E LM
ch r e
Supprimer plusieurs classes d’un élément HTML
©A
list.remove(’red’, ’green’);
console.log(list);

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

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);

JavaScript
Autres méthodes de classList
H I ©
EL
length : retourne le nombre de classes.
O U
LM
contains(classe) : retourne true si classe appartient à
classList, false sinon.
r e f E
A ch la classe d’indice i si i est inférieur à la
item(i) : retourne
©de la liste, null sinon.
longueur

JavaScript
Les attributs d’un formulaire
H I ©
value : pour récupérer la valeur saisie dans une zone de saisie
EL
(input, textarea...)
M OU
checked : pour déterminer
f E Lune case à cocher ou un bouton
si
radio a été cochéh
c r
ou e
non (true ou false)
... ©A

Récupérer/modifier le contenu d’un élément HTML
JavaScript
Récupérer le contenu d’un élément HTML (y compris les balises)

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

JavaScript
Récupérer le contenu d’un élément HTML (y compris les balises)

H I ©
UEL
O
f E LM
r e
Récupérer le contenu d’un élément HTML (sans les balises)
ch
©A
console.log(container.textContent);

JavaScript
Modifier le contenu d’un élément HTML avec innerHTML

container.innerHTML += "<p> hello </p>";
H I ©
EL
O U
f E LM
ch r e
©A

JavaScript
Modifier le contenu d’un élément HTML avec innerHTML

container.innerHTML += "<p> hello </p>";
H I ©
EL
O U
f E LM
h r e
Récupérer le contenu d’un élément HTML avec textContent
=c
var container A document.getElementById("container");
©
container.textContent += "<p> hello </p>";
console.log(container.textContent);

Modifier les propriétés CSS d’un élément HTML
JavaScript
Modifier la couleur
container.style.color = "red";
H I ©
UEL
O
f E LM
ch r e
©A

JavaScript
Modifier la couleur
H I ©
U ELséparés par -, il faut
Pour les propriétés CSS composées de deux mots
M O
supprimer - mettre la propriété en camelCase
f E L
ch e
r
container.style.backgroundColor = "red";
© A

JavaScript
Modifier la couleur
H I ©
U ELséparés par -, il faut
Pour les propriétés CSS composées de deux mots
M O
supprimer - mettre la propriété en camelCase
f E L
ch e
r
container.style.backgroundColor = "red";
© A
Remarque
Un élément HTML, ayant classe red qui modifie la couleur de fond en rouge,
n’a pas forcément la valeur red attribuée au style.backgroundColor

Parent et enfants d’un élément HTML parentNode
JavaScript
Récupérer le parent d’un élément HTML (l’objet)

var parent = container.parentNode;
H I ©
console.log(parent);
U EL
O
f E LM
ch r e
©A

Parent et enfants d’un élément HTML parentNode
JavaScript
Récupérer le parent d’un élément HTML (l’objet)

H I ©
console.log(parent);
U EL
O
f E LM
ch r e
Récupérer le parent d’un élément HTML (le nom)
©A
console.log(parent.nodeName);

Parent et enfants d’un élément HTML firstElementChild et lastElementChild
JavaScript
Récupérer le premier élément fils d’un élément HTML

var premierFils = container.firstElementChild;
H I ©
console.log(premierFils.nodeName);
U EL
O
f E LM
ch r e
©A

Parent et enfants d’un élément HTML firstElementChild et lastElementChild
JavaScript
Récupérer le premier élément fils d’un élément HTML

var premierFils = container.firstElementChild;
H I ©
U EL
O
f E LM
ch r e
Récupérer le dernier élément fils d’un élément HTML
©A
var dernierFils = container.lastElementChild;
console.log(dernierFils.nodeName);

Parent et enfants d’un élément HTML firstChild et lastChild
JavaScript
Récupérer le premier fils (élément, texte ou autre) d’un élément HTML

var premierFils = container.firstChild;
H I ©
U EL
O
f E LM
ch r e
©A

Parent et enfants d’un élément HTML firstChild et lastChild
JavaScript
Récupérer le premier fils (élément, texte ou autre) d’un élément HTML

var premierFils = container.firstChild;
H I ©
U EL
O
f E LM
ch r e
Récupérer le dernier fils (élément, texte ou autre) d’un élément HTML
©A
var dernierFils = container.lastChild;
console.log(dernierFils.nodeName);

Parent et enfants d’un élément HTML childNodes et children
JavaScript
Récupérer tous les enfants (élément, texte ou autre) d’un élé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

JavaScript
Récupérer tous les enfants (élément, texte ou autre) d’un élément

HTML
var enfants = container.childNodes;
H I ©
EL
O U
f E LM
r e
célhéments enfants d’un élément HTML
A
Récupérer tous les
©
var enfants = container.children;

JavaScript
Enfants suivant et précédent

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

JavaScript
Enfants suivant et précédent

previousSibling
nextSibling
H I ©
U EL
previousElementSibling
O
nextElementSibling
f E LM
ch r e
©A
Attention
À chaque appel d’une de méthodes précédentes, le pointeur passe à
l’élément suivant (ou précédent).

Ajouter un nouvel élément HTML
JavaScript
Étapes
H I ©
Créer l’élément UEL
L MO
r e f E
Préparer ses attributs [et valeurs]
ch
L’ajouter au document
A
©

JavaScript
Créer un élément de type p
var par = document.createElement("p");
H I ©
UEL
O
f E LM
ch r e
©A

JavaScript

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

JavaScript

H I ©
par.id = "intro";
UEL
O
LM
f E
r e
ch
©A
Ajouter l’élément au DOM
container.appendChild(par);

JavaScript

H I ©
par.id = "intro";
UEL
O
LM
f E
r e
ch
©A
Ajouter l’élément au DOM
container.appendChild(par);
appendChild() ajoute l’élément comme dernier fils de conteneur

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

JavaScript
La méthode insertAdjacentHTML(position, text)

permet d’insérer un texte HTML (text), dans une position spécifiée
H I ©
(position)
UEL
O
afterbegin,
f E LM
afterend,
ch r e
beforebegin, ©A
beforeend.

JavaScript
Exemple : HTML Le fichier style.css
<!DOCTYPE html> .skyblue {

<html> background-color:
<head> skyblue;
<title> float et clear </title> }
I
.pink {
H ©
EL
</head> background-color: pink;
<body> }
<p id=first>
O U
.green {
bonjour
</p>
f E LM }
background-color: green;
</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>");

JavaScript
Le résultat
beforebegin
H I ©
afterbegin
UEL
O
f E LM
ch r e bonjour
©A beforeend
afterend

Autres opérations sur les éléments HTML
JavaScript
Quelques opé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 vérifier l’existence d’au moins un
nœud enfant

Identifiant en JavaScript
JavaScript
Pour récupérer un élément selon son id, une solution possible consite à utiliser
la méthode getElementById()

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

JavaScript

H I ©
UEL
O
LM
Tous les éléments HTML ayant un identifiant seront chargé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);;
©

JavaScript

H I ©
UEL
O
LM
Tous les éléments HTML ayant un identifiant seront chargé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);;

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

Évènements
JavaScript
Quelques évè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 éléments d’un formulaire
reset et©
A
submit : pour la ré-initialisation et la soumission de formulaire
load : chargement de la fenêtre
scroll : évènement lié au mouvement du scroll
...

Évènements Associer un évènement à un élément
JavaScript
Deux façons différentes pour installer un écouteur d’évènement

H I ©
comme attribut d’une balise HTML en précédant le nom
U EL
O
d’évènement par le préfixe on ayant comme valeur le nom d’une
fonction JavaScript
f E LM
ch r e
dans le fichier JavaScript avec la méthode
©A
addEventListener()

JavaScript
Première méthode (la page HTML)
<!DOCTYPE html>
<html lang="fr">
<head>
H I ©
EL
=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>
</body>
</html>

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

JavaScript
Première méthode (la page HTML)
<!DOCTYPE html>
<html lang="fr">
<head>
H I ©
EL
=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>
</body>
</html>

JavaScript
Contenu du script.js
var cliquer = document.getElementById(’cliquer’); H I ©
U EL
O
f E LM
cliquer.addEventListener(’click’, function() {
alert ("Bonjour " + nom);
ch r e
});
©A

Évènements Objet event
JavaScript
L’objet event permet de récupérer des données sur l’évènement

(rien à 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
});
©A
alert("Bonjour " + nom);

Évènements Supprimer un évènement
JavaScript
H I ©
Pour supprimer un évènement associé à un élément HTML
U EL
O
f E LM
element.removeEventListener(event, nomFunction);
ch r e
©A

Évènements Annuler un évènement
JavaScript
Considérons la page index.html suivante
<!DOCTYPE html>
<html lang="fr">
<head>
H I ©
EL
=1.0">
O U
<title>Prevent event</title>
</head>
f E LM
ch r e
©A
<body>
<div>
Saisir seulement des caractères alphabétiques en minuscule :
<input type="text" id="nom">
</div>
</body>
</html>

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 écrire en minuscule");
event.preventDefault();
© A
alert("Merci
}
});

JavaScript
On ne peut annuler que certains évènements

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

Évènements Arrêter la propagation
JavaScript
Considérons la page index.html suivante
<!DOCTYPE html>
<html lang="fr">
<head>
<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>
</body>
</html>

Les deux div parent et fils
Parent
Fils
H I ©
U EL
O
f E LM
ch r e
©A

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");
}

JavaScript
Constats
En cliquant sur le jaune, jaune est affiché
H I ©
U ELés
En cliquant sur le vert, jaune et vert sont affich
L MO
r e f E
A ch
©

JavaScript
Constats
En cliquant sur le jaune, jaune est affiché
H I ©
U ELés
En cliquant sur le vert, jaune et vert sont affich
L MO
r e f E
A ch
Solution ©
Utiliser la méthode stopPropagation

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

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>

Cours Java Script Dom

Transféré par

Droits d'auteur :

Formats disponibles

Cours Java Script Dom

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

Cours Java Script Dom

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript : le DOM

Docteur de l’université d’Aix-Marseille

H & H: Research and Training 1 / 61

2 Récupérer un élément HTML

3 Récupérer/modifier l’attribut d’un élément HTML

H & H: Research and Training 2 / 61

4 Quelques raccourcis d’attributs

5 Récupérer/modifier le contenu d’un élément HTML

6 Modifier les propriétés CSS d’un élément HTML

7 Parent et enfants d’un élément HTML

H & H: Research and Training 3 / 61

8 Ajouter un nouvel élément HTML

9 Autres opérations sur les éléments HTML

H & H: Research and Training 4 / 61

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

H & H: Research and Training 5 / 61

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

document location navigator screen

H & H: Research and Training 5 / 61

L’objet Window contient

H & H: Research and Training 6 / 61

H & H: Research and Training 7 / 61

H & H: Research and Training 8 / 61

H & H: Research and Training 9 / 61

Plusieurs méthodes pour récupérer un élément HTML

H & H: Research and Training 10 / 61

Considérons la page HTML suivante

H & H: Research and Training 12 / 61

Récupérer un élément selon son id, on ajoute dans script.js

var container = window.document.getElementById("container");

H & H: Research and Training 13 / 61

Récupérer un élément selon son id, on ajoute dans script.js

var container = window.document.getElementById("container");

H & H: Research and Training 13 / 61

Récupérer un élément selon son id, on ajoute dans script.js

var container = window.document.getElementById("container");

Il ne faut pas utiliser # dans getElementById().

H & H: Research and Training 13 / 61

Récupérer des éléments selon le nom de la balise

for (let paragraphe of paragraphes) {

H & H: Research and Training 14 / 61

Récupérer des éléments selon le nom de la balise

for (let paragraphe of paragraphes) {

for (let paragraphe of paragraphes) {

H & H: Research and Training 14 / 61

Récupérer un élément selon sa classe

var bleus = document.getElementsByClassName("blue");

for (let bleu of bleus) {

H & H: Research and Training 15 / 61

Récupérer un élément selon sa classe

var bleus = document.getElementsByClassName("blue");

for (let bleu of bleus) {

for (let bleu of bleus) {

H & H: Research and Training 15 / 61

Récupérer un élément selon sa classe

var bleus = document.getElementsByClassName("blue");

for (let bleu of bleus) {

for (let bleu of bleus) {

Il ne faut pas utiliser . dans getElementsByClassName().