Scribd
Importer
68 vues51 pages

Cours Javascript DOM

Le document explique le modèle DOM (Document Object Model) qui permet d'accéder et de manipuler dynamiquement le contenu des documents HTML, XML et autres. Il détaille la structure hiérarchique des nœuds, les méthodes pour accéder et modifier ces nœuds, ainsi que les propriétés et méthodes associées pour manipuler les éléments HTML. Enfin, il aborde la gestion des événements et les différentes façons de modifier le style et les attributs des éléments dans le DOM.

Transféré par

Abdou Zoubiri
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
68 vues51 pages

Cours Javascript DOM

Le document explique le modèle DOM (Document Object Model) qui permet d'accéder et de manipuler dynamiquement le contenu des documents HTML, XML et autres. Il détaille la structure hiérarchique des nœuds, les méthodes pour accéder et modifier ces nœuds, ainsi que les propriétés et méthodes associées pour manipuler les éléments HTML. Enfin, il aborde la gestion des événements et les différentes façons de modifier le style et les attributs des éléments dans le DOM.

Transféré par

Abdou Zoubiri
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
Vous êtes sur la page 1/ 51

L’API HTML DOM

Le DOM
• "Le modèle DOM (Document Object Model) du W3C est une plate-forme et une
interface indépendante du langage qui permettent aux programmes et aux scripts
d'accéder et de mettre à jour de manière dynamique le contenu, la structure et le style
d'un document"
• La norme DOM W3C est divisée en 3 parties différentes: Core DOM
pour tous les types de documents; DOM XML pour les documents XML;
HTML DOM pour les documents HTML
Le DOM HTML
• Le modèle DOM HTML est construit comme un arbre d'objets. Il s’agit
d’une représentation interne ou un modèle de la page lorsqu’elle est
chargée dans le navigateur.
• Avec le DOM HTML on peut modifier des éléments HTML, des
attributs ou des styles CSS, supprimer des éléments et attributs HTML
existants, ou ajouter de nouveaux éléments et attributs HTML
Concept de noeud (node)
Selon le DOM, tout composant ou élément d’un document Html, Xhtml ou
XML constitue un nœud (node):
• Le document entier est un nœud document (document node).
• Chaque balise ou élément est un nœud élément (element node).
• Le texte contenu entre les balises est un nœud texte (text node).
• Chaque attribut d’une balise ou élément est un nœud attribut (attribute node).
• Les commentaires deviennent des nœuds de commentaire (comment node).
Structure du DOM
Hiérarchisation des nœuds
Les nœuds ont une relation hiérarchique entre eux.
• Exemple:<p>Texte du Paragraphe</p>. P
• Cet exemple contient deux nœuds: Un nœud élément pour
la balise <p> et un nœud texte qui comporte les mots
"Texte du paragraphe". Texte
• Leur relation peut être qualifiée de parent/enfant, la balise
<p> jouant le rôle de parent (parent) et le texte de celui
d’enfant (child).
Arbre d’un document
• Tous les nœuds forment l’arborescence ou l’arbre du document. Cet arbre
commence par le nœud document et se termine par les nœuds texte.
<html>
<head>
<title>Le DOM</title>
</head>
<body>
<h1>Titre de niveau
1</h1>
<p>Texte du
paragraphe</p>
</body>
</html>
L’API HTML DOM
• Dans le DOM, tous les éléments HTML sont définis en tant qu'objets.
• L'interface de programmation est constituée des propriétés et méthodes
de chaque objet.
• Une propriété est une valeur que vous pouvez obtenir ou définir (par
exemple, modifier le contenu d'un élément HTML).
• Une méthode est une action que vous pouvez effectuer (comme ajouter
ou supprimer un élément HTML).
Exemple
<!DOCTYPE html>
<html>
<body> Dans l'exemple, getElementById est
<h1>Manipuler le DOM</h1>
<p id="demo"></p>
une méthode, tandis que innerHTML
<script> est une propriété.
document.getElementById("demo").
innerHTML = "Hello World!";
</script>
</body>
</html>
L’objet document
L’objet document est un nœud DOM qui représente la page HTML, il
englobe tous les éléments HTML de la page.
Il s’agit de l’élément racine de l’arbre DOM.
Accès aux différents types d’objets du
document
Le DOM HTML définit plusieurs objets, collections et propriétés:
• document.anchors: retourne tous les ancres <a> avec un attribut name.
• document.links: retourne tous les <area> et <a> ayant un attribut href .
• document.URL: retourne l’URL du document.
• document.forms:retourne tous les formulaires définis avec <form>.
• document.images:retourne toutes les images.
Accéder à un nœuds
• Par la procédure classique: Elle consiste à définir le chemin, d’objet en
objet, vers l’objet concerné.
• Par l’une des méthodes DOM:
• getElementById()
• getElementsByName()
• getElementsByTagNames()
La méthode getElementById
• La méthode getElementById() parcourt le document Html à la recherche
d’un nœud unique qui a été spécifié par l’attribut id.
• Cet identifiant id doit être unique dans le document.
• C’est la méthode la plus utilisée pour l’accès direct à un élément.
la méthode getElementsByName
• La méthode getElementsByName() permet de sélectionner les éléments
portant un nom donné, spécifié par l’attribut name.
• Les éléments portant le même nom sont stockés dans une liste de nœuds
sous forme d’un objet HTMLCollection.
la méthode getElementsByTagName
• La méthode getElementsByTagName() parcourt le document à la recherche
de toutes les balises d’un type spécifique, signalé en argument.
• Ces balises sont contenues dans un objet HTMLCollection.
Recherche d'éléments HTML par nom de classe

Si vous souhaitez rechercher tous les éléments HTML avec le


même nom de classe, utilisez getElementsByClassName().
Cette méthode n’est pas compatible avec les anciens navigateurs.
Recherche d'éléments HTML à l'aide des
sélecteurs CSS
Si vous voulez trouver tous les éléments HTML qui correspondent à
un sélecteur CSS spécifié (id, noms de classe, types, attributs, valeurs
d'attributs, etc.), utilisez la méthode querySelectorAll().

Cette méthode n’est pas compatible avec les anciens navigateurs.

• Exemple
var x = document.querySelectorAll("p.intro");

Cet exemple renvoie une liste de tous les éléments <p> avec class="intro".
Propriétés de l’objet Node
• Propriétés de relation: décrivent les relations entre les nœuds
• Propriétés d’état: permettent de s’informer sur l’état d’un nœud.
Les propriétés d’état
• nodeName: Indique le nom du nœud sélectionné. Le nom de la balise est
toujours retourné en majuscules.
• nodeType: Indique le type de nœud rencontré. Ce type prend différentes
valeurs :
(1 :élément; 2 :attribut; 3:texte; 9: document; 11: fragment de document,…)
• nodeValue: Permet d’obtenir ou de changer la valeur d’un nœud de type
texte.
Constantes définissant les types de nœuds
Relations entre nœuds
• Les termes parent, enfant et frère sont utilisés pour décrire les relations.
• Dans une arborescence de nœuds, le nœud supérieur est appelé racine (ou
nœud racine).
• Chaque nœud a exactement un parent, sauf la racine (qui n'a pas de
parent)
• Un nœud peut avoir plusieurs enfants
• Les frères et sœurs sont des nœuds avec le même parent
Propriétés de relation
• parentNode :Renvoie le nœud parent d’un nœud.
• firstChild : Renvoie le premier enfant d’un nœud.
• lastChild : Renvoie le dernier enfant d’un nœud.
• childNodes : Stocke une liste de tous les nœuds enfants disponibles à partir
d’un noeud.
• previousSibling : Renvoie le nœud frère/soeur précédent d’un nœud.
• nextSibling : Renvoie le nœud frère/soeur suivant d’un nœud.
Exemple
Utiliser les propriétés des nœuds pour accéder à
un élément
• Il est théoriquement possible d’accéder à n’importe quel élément par un code
comme celui-ci:
x.parentNode.lastChild.childNodes[2].firstChild.nextSibling;
Cette façon de procéder ne se révèle cependant pas très pratique à l’usage car :
• Le code devient rapidement illisible.
• Une simple mise à jour de la page risque de modifier complètement l’arborescence
du document.
• Les navigateurs n’ont pas la même interprétation du DOM ( en particulier les sauts
de ligne)
En pratique…
• Nous utiliserons les méthodes getElementById, getElementsByName ou
getElementsByTagName pour se rapprocher au plus près de l’élément,
• A partir de là, nous utiliserons les propriétés firstChild, parentNode ou
autres propriétés similaires pour accéder à l’élément souhaité.
Ajouter un noeud
• Pour ajouter un nœud, il faut le créer avec createElement() pour un élément
ou createTextNode() pour du texte, puis l’ajouter à l’arbre avec l’une des
méthodes:
• insertBefore():insère le nouvel élément avant l’élément en cours (élément
frère)
• appendChild():insère le nouvel élément comme dernier fils de l’élément en
cours
Méthodes pour manipuler la hiérarchie DOM
Méthode Fonction
createElement Permet de créer un nouvel élément.
createTextNode Crée un noeud texte dans le document.
appendChild Ajoute un élément comme dernier noeud enfant d’un noeud
spécifié en argument.
insertBefore Permet d’insérer un noeud avant un autre noeud.
replaceChild Remplace un noeud par un autre noeud. Le noeud ainsi remplacé,
est supprimé ainsi que tous ses descendants.
removeChild Supprime le nœud (et éventuellement ses descendants) fourni en
argument.
Utilisation des fragments d’arbre
• Les fragments d’arbre peuvent être considérés comme des objets
Document allégés. Ils sont représentés par l’objet DocumentFragment, Il
implémente toutes les méthodes de la classe Node.
• créer un nouveau fragment d’arbre :
var fragment = document.createDocumentFragment();
• Les fragments d’arbre sont très utiles lorsqu’une nouvelle portion de
l’arbre DOM doit être ajoutée.
Caractéristiques des fragments d’arbres
• Le fragment est utilisé uniquement comme container et n’existe plus en
tant que tel une fois qu’il a été inséré dans l’arbre DOM.
• Lorsque le fragment est inséré dans l’arbre DOM, ses fils sont insérés,
mais pas le fragment lui-même.
• Chaque insertion dans l’arbre DOM provoque le rafraîchissement
complet de la page. Il est donc moins coûteux d’utiliser des fragments
pour insérer des portions de documents (1 seul rafraichissement pour
tout le fragment)
Méthodes et propriétés pour modifier un élément
Propriété Description

element.innerHTML = new html content Change le contenu html de l’élément

element.attribute = new value Change la valeur de l’attribut d’un élément HTML

element.style.property = new style Change le style d’un élément HTML

Méthode Description

element.setAttribute(attribute, value) Change la valeur de l’attribute d’un élément HTML


innerHTML
• innerHTML permet de remplacer complètement le contenu d’un élément
par celui spécifié dans une chaîne de caractères.
• En incluant une chaîne de caractères, innerHTML permet d’ajouter
directement des balises HTML, sans passer par les méthodes DOM
(appendChild,...)
• l’utilisation de cette méthode n’est recommandée que dans des cas bien
particuliers (texte simple), et il ne faut surtout pas en abuser.
innerHTML VS Document.write()

• En JavaScript, document.write() peut être utilisé pour écrire directement


dans le flux de sortie HTML

• Ne jamais utiliser document.write() après le chargement du document.


Cela écrasera le document.

• On lui préfèrera innerHTML


L'objet HTMLCollection
• La méthode getElementsByTagName () renvoie
un objet HTMLCollection .
• Un objet HTMLCollection est une liste (collection) d’éléments HTML.
• Les éléments de la collection sont accessibles par un numéro d’index
comme pour les tableaux, mais ce ne sont pas des tableaux.
• La propriété length définit le nombre d'éléments dans une collection
L'objet HTML DOM NodeList
• Un objet NodeList est une liste de nœuds extraits d'un document.
• Les nodeList sont accessibles par leur index comme des tableaux, mais ne
sont pas des tableaux.
• Seul l'objet NodeList peut contenir des nœuds d'attribut et des nœuds de
texte.
L'objet NamedNodeMap
• La propriété attributes d’un noeud-élément retourne une liste des attributs
de l’élément du type NamedNodeMap.
• Dans le DOM HTML, l' objet NamedNodeMap représente une
collection non ordonnée de nœuds d'attributs d'éléments.
• Les nœuds d'un NamedNodeMap sont accessibles par nom ou par index
(numéro).
Manipulation des attributs
attr.name Retourne le nom de l’attribut
attr.value Permet de lire ou modifier la valeur de l’attribut

attr.specified Retourne true si l’attribute est spécifié, false sinon

getNamedItem() Retourne un attribut particulier de la NodeMap

setAttribute() Crée un attribut ou remplace un attribut existant d’un


élément.
Manipuler les styles CSS
• Syntaxe:
document.getElementById(id).style.property=nouveau_style
• Chaque élément possède un attribut "style", possédant lui même les différents
attributs du CSS  Vous pouvez donc utiliser cet attribut pour connaître et
modifier les paramètres CSS d'un affichage.
• Il est aussi possible de modifier directement la classe d'un élément, grâce à son
attribut className
• Rappel: toujours séparer la forme du fond.
Manipuler le Style-suite
• On accède à l’objet Style soit à partir de l’élément head, ou à partir
d’éléments HTML spécifiques.
• Dans le Head:
var x = document.getElementsByTagName("STYLE");
• A partir d’un élément donné:
var x = document.getElementById("myH1").style;
Style-suite
• Créer un objet Style: on utilise la méthode document.createElement():
var x = document.createElement("STYLE");
• Définir les propriétés de style d’un élément existant:
document.getElementById("myH1").style.color = "red";
Exemple 1

<form>
<input type="button"
onClick="document.getElementById('id1').style.color = 'red' "
value="Changer couleur"/>
</form>
Exemple: Afficher/cacher un texte
<body>
<p id="p1">
ceci est du texte. </p>
<input type="button" value="cacher texte"
onClick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="afficher texte"
onClick="document.getElementById('p1').style.visibility='visible'">
</body>
Changer la valeur d’un attribut
• Syntaxe:
document.getElementById(id).attribute=nouvelle valeur
• Exemple:
<img id="monImage" src="image.gif">
<script>
document.getElementById("monImage").src = "Nouvelle_image.gif";
</script>
Ajouter un gestionnaire d’événement
On peut associer un gestionnaire d’évènement à tout élément du document
en utilisant:
node.getElementById(id).onClick=function()
Gestion d'événements avec DOM
La méthode standard, prescrite par le W3C

• Faire appel à la méthode addEventListener de votre élément, et lui donner


comme premier attribut le nom de l’événement à gérer (click par exemple)
• Indiquer une fonction, qui sera déclenchée lors de l'évènement
• Indiquer un mode de propagation (optionnel, généralement à false)
• Vous pouvez supprimer la gestion de cet événement en faisant appel
removeEventListener avec les même paramètres utilisés lors de l'ajout.
Exemple
element.addEventListener('click', function() {
alert("Vous avez cliqué ici!");}, false);
Modes de propagation des événements
Deux modes de propagation sont possibles:
• Par ‘capture’ (true) l’événement se propage de la racine jusqu’à l’élément.
• Par ‘bubbling’ (false): l’événement remonte de l’élément vers les nœuds
supérieurs de l’arbre.
Ces modes représentent le troisième paramètre de « addEventListener » qui le
plus souvent à « false »
Bubbling ou capturing?
• La propagation définit l’ordre d’exécution des gestionnaires d’événements
des éléments imbriqués.
Exemple: <div ><p>…</p></div> . Supposons que div et p ont tous les
deux des event listeners on l’événement click. Que se passerait-il lors du
click de l’utilisateur sur le paragraphe?
Exemple - suite
• Bubbling (false): l’élément le plus interne est géré en premier, donc l’event
handler de p sera executé en premier, puis celui de div
• capturing (true) l’élément le plus externe est géré en premier: l’event handler
de div sera executé en premier, puis celui de p.
Ajout et suppression des handlers
d’événements

• Ajouter un event handler:


document.addEventListener("click", myFunction);

• Supprimer un event handler:


document.removeEventListener("click", myFunction);
Avantages
L’utilisation des EventHandlers présente plusieurs avantages:
• Séparation entre le code HTML et JavaScript
• Il est possible de créer plusieurs événements identiques pour un
événement (par exemple, deux événement se déclenchant l'un après
l'autre lors d'un click sur l'élément): il suffit de faire appel à cette méthode
plusieurs fois de suite, avec des paramètres différents.
Quand peut-on accéder à l’arbre DOM?
• Le DOM n’est accessible que lorsque la page est chargée dans sa globalité.
Les traitements sur l’arbre DOM doivent donc être effectués après le
déclenchement de l’événement onload du document afin de garantir la
présence de tous les éléments.

Vous aimerez peut-être aussi