CoursPWADOM PDF

Document Object Model DOM
• Pour manipuler un code HTML dynamiquement, nous allons avoir besoin d’une interface qui va
nous permettre d’accéder à ce code HTML.
• L’interface que nous allons utiliser est DOM
• Il s'agit d'une interface qui permet de standardiser les moyens d'accès à un document balisé,
notamment une page Web.
• Avec DOM, une page Web est schématisée comme une arborescence hiérarchisée. Les différentes
composantes d'une telle arborescence sont désignés comme étant des nœuds
• Une interface de programmation qui va permettre à des programmes informatiques et à des scripts
d’accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML
• indépendant du langage de programmation et de la plate-forme. 1

• L'objet central du modèle DOM est l'objet node (node = nœud). Il existe trois types de nœud
importants : les nœuds-élément, les nœuds-attribut, et les nœuds-texte.
2
Pour manipuler les éléments de la page il faut au préalable les sélectionner. La sélection
d’éléments peut se faire:
• Par son attribut id
• Par son attribut name
• Par sa balise
• Par un sélecteur CSS
1. La méthode getElementById de l’objet document sélectionne l’unique élément du

document dont l’id est fourni en paramètre, ou null si aucun.
var element = document.getElementById (" myid");
3
2. La méthode getElementsByName permet de sélectionner les éléments portant un nom donné dans
une page
Résultat:
4
3. la méthode getElementsByTagName sélectionne les éléments dont la balise est fournie en
paramètre
5
4. la méthode querySelectorAll sélectionne les éléments retenus par le sélecteur CSS fourni en
paramètre
6
les objets éléments obtenus par sélection possèdent des propriétés manipulables :
 attributs
 contenu
 style CSS
il est possible d’agir sur ces propriétés après sélection de l’élément.
1. Manipuler les attributs:
Pour interagir avec les attributs, l'objet Element nous fournit deux méthodes, getAttribute() et
setAttribute() permettant respectivement de récupérer et d'éditer un attribut.
7
<body>
<a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié dynamiquement</a>
<script>
var link = document.getElementById('myLink');
var href = link.getAttribute('href'); // On récupère l'attribut « href »
link.setAttribute('href', 'http://www.w3schools.com/ '); // On édite l'attribut « href»
</script>
</body>
 il est possible d'accéder à un attribut via une propriété (ex: link.href)
 Pour modifier la valeur d’un attribut class (ce mot est réservé en JavaScript et on ne peut donc
pas l’utiliser comme cela), il faudra utiliser la propriété className
8
9
2. manipuler le contenu
- innerHTML
la propriété innerHTML représente le contenu HTML d’un élément
• En lecture, sa valeur contient les balises
• En modification, son contenu est interprète par le navigateur
- textContent
la propriété textContent représente le contenu textuel d’un élément
• En lecture, sa valeur ne contient pas les balises HTML
• En modification, son contenu n’est pas interprété par le navigateur
10
11
Agir sur les propriétés CSS
- La propriété style d’un élément permet de modifier les propriétés CSS pour cet élément
- On utilise directement le nom de la propriété CSS après « conversion camelback » si
nécessaire (font-size -> fontSize, border-right-style -> borderRightStyle, etc.).
- les valeurs sont toujours des chaînes de caractères
- les unités doivent être précisées
12
13
Naviguer entre les nœuds
- Une fois que l'on a atteint un élément, il est possible de se déplacer de façon un peu plus
précise, avec toute une série de méthodes et de propriétés
- La propriété parentNode permet d'accéder à l'élément parent d'un élément
- nodeType et nodeName servent respectivement à vérifier le type d'un nœud et le nom d'un
nœud. nodeType retourne un nombre, qui correspond à un type de nœud.
- firstChild et lastChild servent respectivement à accéder au premier et au dernier enfant d'un

nœud.
- nextSibling et previousSibling sont deux propriétés qui permettent d'accéder respectivement

au nœud suivant et au nœud précédent
14
15
16
Créer et insérer des éléments
Avec le DOM, l'ajout d'un élément HTML se fait en trois temps :
1. On crée l'élément ;
2. On lui affecte des attributs ;
3. On l'insère dans le document, et ce n'est qu'à ce moment-là qu'il sera « ajouté ».
• La création d'un élément se fait avec la méthode createElement(), un sous-objet de l'objet

racine, c'est-à-dire document dans la majorité des cas.
let newLink = document.createElement('a');
Cet élément est créé, mais n'est pas inséré dans le document, il n'est donc pas visible.
17
• Comme nous avons vu précédemment : on définit les attributs, soit avec setAttribute(), soit
directement avec les propriétés adéquates.
newLink.id= 'MyID';
newLink.setAttribute('href', 'http://www.w3schools.com/ ');
• On utilise la méthode appendChild() pour insérer l'élément. Elle signifie « ajouter un enfant
», ce qui signifie qu'il nous faut connaître l'élément auquel on va ajouter l'élément créé.
Donc, pour ajouter notre élément <a> dans l'élément <p> portant l'ID myP, il suffit de
récupérer cet élément, et d'ajouter notre élément <a> via appendChild():
document.getElementById('myP').appendChild(newLink);
18
appendChild() insére toujours l'élément en tant que dernier enfant.
• L'élément a été inséré, seulement il manque quelque chose : le contenu textuel ! La méthode
createTextNode() sert à créer un nœud textuel
let newLinkText = document.createTextNode(« Mon site");
newLink.appendChild(newLinkText);
19
EVÉNEMENTS
Les évènements correspondent à des actions effectuées soit par un utilisateur, soit par le navigateur lui-
même. Pour réagir aux événements, nous pouvons assigner un gestionnaire (associer une fonction qui
s'exécute lorsque l’événement se déclenche). Il existe différents types d’évènements, ils caractérisent
l’action réalisée et dépendent de l’élément cible (sur lequel porte l’action).
 Actions de l’utilisateur via le clavier ou la souris

→ click, keypress, keyup, mouseover, etc.)
 Changement d’état
→ change, focus
 Chargement d’un élément

→ load
 etc.
20
1. La première méthode consiste à utiliser des attributs HTML de « type » évènement, et
ensuite il faut créer le code correspondant à l’action que l’on souhaite attacher à notre
évènement. Les attributs HTML de type évènements sont nombreux. Voici quelques
événements:
21
Le script suivant utilise l’attribut onclick dans une balise HTML.
L'inconvénient de cette méthode est que le javascript se retrouve mélangé avec le HTML
2. La deuxième méthode consiste à utiliser DOM HTML. Nous avons deux manières de réagir aux
évènements:
 DOM-0: On utilise des propriétés qui vont assigner un gestionnaire d’événement à un élément
spécifique en HTML,
 DOM-2: utiliser la méthode addEventListener().
22
1. DOM-0:
Nous pouvons assigner un gestionnaire en utilisant une propriété DOM avec: on<event>
Nous pouvons aussi assigner directement une fonction en tant que gestionnaire:
Attention: - La fonction doit être assignée comme : sayThanks n’est pas sayThanks()
- Utiliser elem.onclick n’est pas elem.ONCLICK
23
Le DOM-0 ne permet pas d’assigner plusieurs fois le même gestionnaire d’événement à un élément
HTML. Seul l'action du dernier évènement sera déclenchée, comme dans l'exemple ci-dessous
1. DOM-2: Le modèle d'événement DOM niveau 2 définit deux méthodes de l’objet Element,
addEventListener et removeEventListener, qui permettent d'attacher ou de détacher un
gestionnaire d'événement.
Syntaxe:
24
Les deux méthodes peuvent contenir trois paramètres :
 event: une chaine de caractères désignant le type d’événement sans le "on"
→ "click", "load", "change", "mouseover", "keypress" etc.
 handler: la fonction qui sera appelée lorsque l’événement se produit
 phase: un booléen pour gérer la propagation (on y reviendra plus tard) : false par défaut.
Exemple:
Ou:
25
Pour détacher un gestionnaire d'événement, il faut passer à la méthode removeEventListener les
mêmes paramètres passés à addEventListener. Par exemple
Dans l'exemple ci-dessous, le gestionnaire sera supprimé ou non?
Ici, le gestionnaire ne sera pas supprimé, car removeEventListener est lié a une autre fonction (même
code, mais cela n'a pas d'importance.)
26
L’un des grands avantages de la méthode addEventListener() est de pouvoir lier plusieurs
gestionnaires d’évènements de même type sur un élément HTML.
27
Le troisième argument (phase) permet de gérer le sens de propagation de l'évènement. Ce
paramètre s'avère utile lorsque les éléments HTML sont imbriqués comme dans l'exemple
suivant:
La question est de savoir le premier qui vas exécuter l'action si on applique à chacun d'eux un
évènement (un 'click', par exemple).
 Si l'élément enfant s'exécute avant l'élément parent, on parle de bouillonnement, c'est le

comportement par défaut, la valeur du troisième argument est false
 Si l'élément parent s'exécute avant l'élément enfant, on parle de capture, la valeur du

troisième argument est true
28
Le code ci dessous exploite la capture
Si vous cliquez d'abord sur 'enfant' (le paragraphe toto), c'est l'évènement du parent qui sera exécuté
avant : c'est la phase de capture définie par la valeur true du troisième argument.
Si vous mettez false (ou si vous ne mettez pas de troisième argument), vous êtes dans la phase de
propagation par défaut, qui est celle du bouillonnement.
29
This
Le mot-clé this fait référence à l’objet actuellement en cours d'utilisation. Donc, si vous faites appel à ce
mot-clé lorsqu'un événement est déclenché, l'objet pointé sera l'élément qui a déclenché l'événement
30
L'OBJET Event
l'objet Event sert à nous fournir une multitude d'informations sur l'événement actuellement déclenché.
L'objet est passé en paramètre de la fonction qui est appelée par l'événement.
Exemple:
 type : indique quel type d'évènement s'est produit ("focus", "load", etc).
 currentTarget: fonctionne comme le this vu plus haut. Elle fait toujours référence à l'écouteur, c'est à
dire à celui qui déclenche l'évènement
 clientX et clientY : elles sont utilisées avec des évènement souris (comme le 'click'), pour récupérer la
position x et y de la souris.
31
 target : fait référence à l'élément html qui reçoit l'évènement et non pas à l'élément qui déclenche
l'évènement (l'écouteur).
32
On clique sur l'élément parent, l'objet ciblé est 'parent', mais si vous cliquez sur l'enfant, l'objet ciblé est
'enfant' puisqu'il reçoit l'événement, et non pas l'écouteur 'parent'.
33
 keyCode : lorsque on utilise des évènement clavier (ex: 'keydown'), cette propriété nous permet de
récupérer le code de la touche.
34
Javascript:
jQuery:
35
Fonctionnement de base de jQuery
jQuery est une bibliothèque JavaScript libre la plus utilisée, créée pour faciliter l'écriture de scripts côté
client dans le code HTML. La bibliothèque contient les fonctionnalités suivantes :
• Parcours et modifications du DOM et la gestion des événements ;
• Effets visuels et animations ;
• Manipulation des CSS ;
• Envoyer et recevoir des données depuis un serveur grâce à AJAX
• Etc.
36
 jQuery est une bibliothèque JavaScript qui n'est pas installée dans votre navigateur. Il faut l'ajouter par
le biais d'un fichier ayant pour extension .js
 Pour l’installer localement il faut télécharger jQuery sur son site officiel
(http://jquery.com/download/)
 Pour l'utiliser, il faut lier le fichier jQuery par le biais de la balise script
 Vous pouvez faire l'import de jQuery avant la balise de fermeture </body>. Cette technique améliore la
vitesse de chargement du site internet.
37
 La manière la plus courante et aussi la plus utilisée est de passer par un CDN (Content
Delivery Network)
 Il existe plusieurs CDN pouvant vous fournir le fichier :
1.CDN jQuery : http://code.jquery.com/jquery-2.1.1.js
2.CDN Google : http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

Pour faire l'installation, il suffit donc de remplacer le chemin du fichier en local par l'URL
du CDN :
38
jQuery repose sur une seule et unique fonction : jQuery(), ou son alias, $(). Cette fonction
accepte un ou plusieurs paramètres et retourne un objet que nous appellerons « objet jQuery ».
39
 Un des grands avantages de jQuery est d'utiliser la syntaxe des sélecteurs CSS. Pour
sélectionner les nœuds du DOM (éléments) nous utiliserons la syntaxe $(sélecteur).
40
 Le tableau suivant donne quelques exemples de sélecteurs et indique à quoi ils correspondent:
41
 jQuery est utilisé pour manipuler le DOM en écriture et en lecture. Prenons le cas où le DOM
n'est pas encore totalement construit lors du chargement de la page et que le script jQuery est
exécuté ; les sripts produiront des erreurs. Pour attendre que le DOM soit entièrement chargé
et ainsi éviter des erreurs:
42

CoursPWADOM PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CoursPWADOM PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Document Object Model DOM

• L’interface que nous allons utiliser est DOM

• indépendant du langage de programmation et de la plate-forme. 1

• Par son attribut id

• Par son attribut name

• Par un sélecteur CSS

1. La méthode getElementById de l’objet document sélectionne l’unique élément du

var element = document.getElementById (" myid");

il est possible d’agir sur ces propriétés après sélection de l’élément.

1. Manipuler les attributs:

<a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié dynamiquement</a>

var link = document.getElementById('myLink');

var href = link.getAttribute('href'); // On récupère l'attribut « href »

link.setAttribute('href', 'http://www.w3schools.com/ '); // On édite l'attribut « href»

 il est possible d'accéder à un attribut via une propriété (ex: link.href)

la propriété innerHTML représente le contenu HTML d’un élément

• En lecture, sa valeur contient les balises

• En modification, son contenu est interprète par le navigateur

la propriété textContent représente le contenu textuel d’un élément

• En lecture, sa valeur ne contient pas les balises HTML

• En modification, son contenu n’est pas interprété par le navigateur

- On utilise directement le nom de la propriété CSS après « conversion camelback » si

nécessaire (font-size -> fontSize, border-right-style -> borderRightStyle, etc.).

- les valeurs sont toujours des chaînes de caractères

- les unités doivent être précisées

- La propriété parentNode permet d'accéder à l'élément parent d'un élément

- firstChild et lastChild servent respectivement à accéder au premier et au dernier enfant d'un

- nextSibling et previousSibling sont deux propriétés qui permettent d'accéder respectivement

Avec le DOM, l'ajout d'un élément HTML se fait en trois temps :

2. On lui affecte des attributs ;

3. On l'insère dans le document, et ce n'est qu'à ce moment-là qu'il sera « ajouté ».

• La création d'un élément se fait avec la méthode createElement(), un sous-objet de l'objet

let newLink = document.createElement('a');

newLink.setAttribute('href', 'http://www.w3schools.com/ ');

appendChild() insére toujours l'élément en tant que dernier enfant.

 Actions de l’utilisateur via le clavier ou la souris

 Chargement d’un élément

 DOM-2: utiliser la méthode addEventListener().

- Utiliser elem.onclick n’est pas elem.ONCLICK

 event: une chaine de caractères désignant le type d’événement sans le "on"

→ "click", "load", "change", "mouseover", "keypress" etc.

 handler: la fonction qui sera appelée lorsque l’événement se produit

Dans l'exemple ci-dessous, le gestionnaire sera supprimé ou non?

 Si l'élément enfant s'exécute avant l'élément parent, on parle de bouillonnement, c'est le

 Si l'élément parent s'exécute avant l'élément enfant, on parle de capture, la valeur du

• Parcours et modifications du DOM et la gestion des événements ;

• Effets visuels et animations ;

• Manipulation des CSS ;

• Envoyer et recevoir des données depuis un serveur grâce à AJAX

 Il existe plusieurs CDN pouvant vous fournir le fichier :

1.CDN jQuery : http://code.jquery.com/jquery-2.1.1.js

2.CDN Google : http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

S-ar putea să vă placă și