Cours DOM

DOM
Document Object
Model
1
2
Manipulation des objets du document
DOM – arbre du document
3
La structure DOM
• le DOM pose comme concept que la page Web est vue comme un
arbre, comme une hiérarchie d'éléments. On peut donc
schématiser une page Web simple comme ceci :
4
5
La structure DOM
• L'élément <html> contient deux éléments,

appelés enfants : <head> et <body>. Pour ces deux
enfants, <html> est l'élément parent. Chaque élément est
appelé nœud (node en anglais). L'élément <head> contient lui aussi
deux enfants : <meta> et <title>. <meta> ne contient pas d'enfant
tandis que <title> en contient un, qui s’appelle #text. Comme son
nom l'indique, #text est un élément qui contient du texte.
• NB : le texte présent dans une page Web est vu par le DOM comme
un nœud de type #text.
6
Conception de l’arborescence
• Le schéma adopté des documents est une arborescence
hiérarchisée.
• Les différentes composantes d'une telle arborescence sont

désignées comme étant des nœuds. L'objet central du
modèle DOM est pour cette raison l'objet node (node =
nœud).
• Il existe différents types de nœuds : les nœuds-élément,

les nœuds-enfant, nœuds-associé et les nœuds-texte.
7
Exemple HTML :
<h1 align="center">Bonjour <i>tout le monde</i></h1>
• L'élément h1 est le nœud de départ
• Ce nœud a d'après les règles du modèle DOM, deux nœuds-

enfant et un nœud associé :
– Les nœuds enfant sont d'une part le nœud texte avec le mot
"Bonjour" suivi d'un espace, d'autre part le nœud élément de
l'élément i.
– L'attribut align dans la balise ouvrante <h1> n'est pas par

contre un nœud-enfant mais un nœud associé.
8
Exemple HTML :
<h1 align="center">Bonjour <i>tout le monde</i>!</h1>
• Le nœud-attribut a toutefois lui-même un nœud enfant

à savoir la valeur affectée(center).
• Même le nœud-élément de l'élément i a, à son tour, un

nœud-enfant, à savoir le nœud texte de son contenu
de caractères, donc le mot "tout le monde".
9
accès aux nœuds
10
accès aux nœuds
11
accès aux nœuds
getElementById() :
Cette méthode permet de récupérer, s’il existe, le premier élément
HTML dont l’attribut ID a la valeur spécifiée. Sinon un objet à la
valeur Null sera retourné.
Exemple :
Le résultat est le suivant :
12
accès aux nœuds
getElementsByTagName() :
• Cette méthode permet de récupérer, sous la forme d'un tableau,
tous les éléments dont la balise a le nom spécifié. Si, dans une page,
on veut récupérer tous les <div>, il suffit de faire comme ceci :
• La méthode retourne une collection d'éléments (utilisable de la

même manière qu'un tableau). Pour accéder à chaque élément, il
est nécessaire de parcourir le tableau avec une petite boucle.
13
accès aux nœuds
getElementsByName() : Renvoie une liste des éléments ayant le
nom donné, elle permet de ne récupérer que les éléments qui
possèdent un attribut name que vous spécifiez.
Exemple:
<div name="up">200</div>
<div name="up">145</div>
<div name="other">178</div>
up_divs = document.getElementsByName("up");
// retourne une liste des éléments contenant l’attribut name égal à
"up" 14
accès aux nœuds
getElementsByClassName() : Renvoie une liste des éléments
ayant le nom de la classe donnée
Exemple:
<div class="entete">l’entête de la page</div>
<div class="corps">ceci est le corps du texte</div>
<div name=" entete ">une autre entête</div>
up_divs = document.getElementsByClassName(" entete ");
// retourne une liste des éléments contenant l’attribut class égal à
"entete “ (1ere et 3ème division)
15
accès aux nœuds
querySelector() et querySelectorAll():
• simplifier la sélection d'éléments dans l'arbre DOM.
• Ces deux méthodes prennent pour paramètre une chaîne de

caractères.
• Cette chaîne de caractères doit être un sélecteur CSS.
• La première, querySelector(), renvoie le premier élément

trouvé correspondant au sélecteur CSS, tandis
que querySelectorAll() va renvoyer tous les éléments (sous
forme de tableau) correspondant au sélecteur CSS fourni.
16
Exemple
Résultat : Elément 1- Elément 2

17
Notion d’héritage
• Un élément <div> est un objet HTMLDivElement, mais un objet, en Javascript,
peut appartenir à différents groupes.
• Ainsi, notre <div> est un HTMLDivElement, qui est un sous-objet
d'HTMLElement qui est lui-même un sous-objet d'Element. Element est enfin un
sous-objet de Node.
• L'objet Node apporte un certain
nombre de propriétés et de méthodes
qui pourront être utilisées depuis un
de ses sous-objets.
• En clair, les sous-objets héritent des
propriétés et méthodes de leurs objets
parents.
18
Editer les éléments HTML
Les attributs : Via l'objet Element

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. Le 1er paramètre est le nom de l'attribut, et le 2ème
paramètre, dans le cas de setAttribute() , nom de l’attribut avec la nouvelle valeur à
donner à l'attribut
19
Editer les éléments HTML
Récupérer/modifier du HTML : innerHTML permet de
récupérer/modifier le code HTML enfant d'un élément sous forme
de texte. Ainsi, si des balises sont présentes, innerHTML les
retournera sous forme de texte :
20
Modifier le contenu HTML
• Pour modifier le contenu HTML, il suffit de faire l'inverse, c'est-à-dire de définir un
nouveau contenu :
Récupérer/modifier du texte: textContent récupère le texte (du nœud

et ses descendants), pas les balises.
21
A retenir
• Le DOM va servir à accéder aux éléments HTML présents dans un document afin
de les modifier et d'interagir avec eux.
• L'objet window est un objet global qui représente la fenêtre du navigateur
• Document est un sous objet de window et représente la page Web. C'est grâce
à lui que l'on va pouvoir accéder aux éléments HTML de la page Web.
• Méthodes,comme getElementById(), getElementsByTagName(),querySelector()

ou querySelectorAll(), sont disponibles pour accéder aux éléments.
• Les attributs peuvent tous être modifiés grâce à setAttribute().
• La propriété innerHTML permet de récupérer ou de définir le code HTML

présent à l'intérieur d'un élément.
• De son côté, innerText n’est capable que de définir ou récupérer du texte brut,
sans aucunes balises HTML.
22
Naviguer entre les nœuds
23
Naviguer entre les nœuds
24
25
26
Exemple
27
28
La propriété parentNode
Pour accéder à l'élément <blockquote>, qui est le parent de myP. Il

suffit d'accéder à myP puis à son parent, avec parentNode.
29
nodeType : retourne les type d’un nœud sous forme d’un nombre entier. Voici un
tableau qui liste les types courants, ainsi que leurs numéros.
Numéro Type
1 nœud élément
2 Nœud attribut
3 Nœud texte
8 Nœud commentaire
9 Nœud document
nodeName : Selon le type de nœud, sa valeur est,

– pour un nœud élément : le nom de sa balise, en toutes majuscules;
– pour un nœud attribut : le nom de l’attribut;
– pour un nœud texte : toujours #text;
– pour le nœud document : toujours #document.
30
Le premier enfant
de <p> est un nœud
textuel, alors que le
dernier enfant est un
élément <strong>.
31
childNodes : retourne un tableau contenant la liste des enfants d'un élément.
nodeValue et data : Retourne la valeur d’un nœud.
les propriétés nodeValue et data ne s'appliquent que sur des nœuds textuels
first contient le 1 nœud, un nœud textuel. Il suffit de lui appliquer la

propriété nodeValue (ou data) pour récupérer son contenu.
Last contient <strong>. il faut d'abord accéder au nœud textuel que contient notre
élément. Pour cela, on utilise firstChild, ensuite on récupère le contenu
avec nodeValue ou data.
Résultat : Un peu de texte, une portion en emphase
32
Remarque :Les espaces et retours à la ligne effectués dans le code
HTML sont généralement considérés comme des nœuds textuels par
les navigateurs.
33
34
Créer et insérer des éléments
Avec le DOM, l'ajout d'un élément HTML se fait en trois temps :
• On crée l'élément.
• On lui affecte des attributs.
• On l'insère dans le document
1. Création de l'élément
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 :
35
2. Affectation des attributs :
on définit les attributs, soit avec setAttribute(), soit directement avec
les propriétés adéquates.
36
3. Insertion de l'élément :
On utilise la méthode appendChild() pour insérer l'élément.
appendchild signifie « ajouter un enfant », ce qui signifie qu'il nous faut
connaître l'élément auquel on va ajouter l'élément créé. Considérons
donc le code suivant :
37
Insertion de l'élément :
• On va ajouter notre élément <a> dans

l'élément <p> portant l'ID myP.
• il suffit de récupérer cet élément (p), et d'ajouter notre

élément <a> via appendChild() :
38
Explication : avant d'insérer notre élément <a>, la structure DOM du
document ressemble à ceci :
39
On voit que l'élément <a> existe, mais n'est pas lié. Un peu comme s'il
était libre dans le document : il n'est pas encore placé. Le but est de le
placer comme enfant de l'élément myP. La méthode appendChild() va
alors déplacer notre <a> pour le placer en tant que dernier enfant
de myP :
40
Ajouter des nœuds textuels :
L'élément a été inséré, seulement il manque le contenu

textuel. La méthode createTextNode() sert à créer un nœud
textuel (de type #text) qu'il nous suffira d'ajouter à notre
élément inséré, comme ceci :
41
Résultat : <div>
<p id="myP">Un peu de texte <a>et un lien</a> <a id=" sdz_link"
href="http://blog.crdp-versailles.fr/rimbaud" title="Découvrez le blog de la Classe Actu
! ">Le Tonnerre de Rimbaud</a></ </p></div>
42
43
44
Cloner un élément
• cloneNode() : Cette méthode requiert un paramètre booléen
( true ou false) : si vous désirez cloner (copier) le nœud avec (true)
ou sans (false) ses enfants et ses différents attributs.
• Exemple : on crée un élément <hr />, et on veut un deuxième,

donc on clone le premier :
45
Remplacer un élément par un autre
• replaceChild() : Cette méthode accepte deux paramètres : le 1 est le nouvel
élément, et le 2 est l'élément à remplacer. Cette méthode s'utilise sur tous les
types de nœuds (éléments, nœuds textuels, etc.).
• Exemple : le contenu textuel (pour rappel, il s'agit du premier enfant de <a>) va

être remplacé par « et un hyperlien ». La méthode replaceChild() est exécutée
sur l'élément <a>, c'est-à-dire le nœud parent du nœud à remplacer.
Résultat :
<div><p id="myP">Un peu
de texte <a>et un
hyperlien</a> </p></div>
46
Supprimer un élément
• Pour en supprimer un élément, on utilise removeChild(). Cette méthode
prend en paramètre le nœud enfant à retirer. Soit le code HTML avec un
script ressemble à ceci :
• la méthode removeChild() retourne l'élément supprimé, ce qui veut dire qu'il

est parfaitement possible de supprimer un élément HTML pour ensuite le
réintégrer où on le souhaite dans le DOM :
47
Vérifier la présence d'éléments enfants
• hasChildNodes() : Il suffit d'utiliser cette méthode sur l'élément
de votre choix ; si cet élément possède au moins un enfant, la
méthode renverra true :
48
insérer un élément avant un autre
• La méthode insertBefore() permet d'insérer un élément avant un
autre. Elle reçoit deux paramètres : le premier est l'élément à
insérer, tandis que le deuxième est l'élément avant lequel
l'élément va être inséré. Exemple :
Résultat :
<p id="myP">Un peu de
texte ><em> en emphase
légère </em><a>et un
hyperlien</a> </p>
49
L'objet style
on peut aller plus loin et interagir avec les styles d'une page (en
lecture-écriture), en intervenant sur le DOM par des fonctions
Javascript agissant sur un nouvel objet : style défini sur chaque
élément du DOM.
Pour cela il suffit d'obtenir une référence de cet élément : id
On peut directement accéder aux attributs id et class d'un élément

donné à l'aide des propriétés du DOM id et className.
50
L'objet style
il est possible d'avoir accès séparément à toutes les propriétés de
style, en faisant appel à la collection style.
L'objet style permet de lire et de modifier de façon dynamique
toutes les propriétés de style pour l'élément auquel il s'adresse,
avec la syntaxe element.style.propriete.
Il suffit d'en connaitre une référence, par getElementById()
Syntaxe La lecture ou la modification des propriétés de style :
nœud= document.getElementById("id");
nœud.style.propriete = "valeur";
51
Exemple :
en CSS on aurait écrit :
<style type="text/css"> #nœud {font-size:12px; border-bottom: 1px solid #000; }
</style>
l'équivalent en DOM est :
var n = document.getElementById("nœud");
// taille de la police de l'élément à 12 pixels.
n.style.fontSize="12px";
// bordure du bas de 1 pixel avec un style solide et une couleur noire.
n.style.borderBottom = "1px solid #000";
Remarque : pour chaque propriété dont le nom en CSS comporte un trait
d'union, JavaScript demande l'utilisation d'une majuscule. Ainsi on note fontSize
au lieu de font-size
52
Accès aux classes CSS
Pour connaître, modifier ou bien attribuer l'attribut CLASS d'une balise HTML , on
utilise la propriété JS className.
Exemple:
// dans <head>
<style type="text/css">
.out {display:block;width:150px;height:30px;border: 1px solid #000;background-
color:none;} .over{display:block;width:150px;height:30px;border: 1px solid
#000;background-color:lime;} </style>
// dans <body>
<div id="divtext" class="out" >Zone de texte dans un div</div>
<script type="text/javascript">
divtext=document.getElementById("divtext");
// ici, this est exactement divtext
divtext.onmouseover= function() {this.className='over'};
divtext.onmouseout= function() {this.className='out'} 53
La propriété visibility qui prend 2 valeurs hidden ou visible.
l'exemple suivant :
<h3 onmouseover="document.getElementById('im2').style.visibility='visible' "
onmouseout="document.getElementById('im2').style.visibility='hidden' ">
Passez la souris ici sur ce paragraphe pour rendre l'image visible ! </h3>
<p id="im2" style="visibility:hidden" > <img src="style1.png" alt="image"> </p>
Si souris ne passe pas sur ce paragraphe Si souris passe sur ce paragraphe
54

Cours DOM

Transféré par

Droits d'auteur :

Formats disponibles

Cours 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 DOM

Transféré par

Droits d'auteur :

Formats disponibles

DOM

• L'élément <html> contient deux éléments,

• Les différentes composantes d'une telle arborescence sont

• Il existe différents types de nœuds : les nœuds-élément,

• Ce nœud a d'après les règles du modèle DOM, deux nœuds-

– L'attribut align dans la balise ouvrante <h1> n'est pas par

• Le nœud-attribut a toutefois lui-même un nœud enfant

• Même le nœud-élément de l'élément i a, à son tour, un

Le résultat est le suivant :

• La méthode retourne une collection d'éléments (utilisable de la

• simplifier la sélection d'éléments dans l'arbre DOM.

• Ces deux méthodes prennent pour paramètre une chaîne de

• Cette chaîne de caractères doit être un sélecteur CSS.

• La première, querySelector(), renvoie le premier élément

Résultat : Elément 1- Elément 2

Les attributs : Via l'objet Element

Récupérer/modifier du texte: textContent récupère le texte (du nœud

• L'objet window est un objet global qui représente la fenêtre du navigateur

• Méthodes,comme getElementById(), getElementsByTagName(),querySelector()

• Les attributs peuvent tous être modifiés grâce à setAttribute().

• La propriété innerHTML permet de récupérer ou de définir le code HTML

Pour accéder à l'élément <blockquote>, qui est le parent de myP. Il

nodeName : Selon le type de nœud, sa valeur est,

first contient le 1 nœud, un nœud textuel. Il suffit de lui appliquer la

Résultat : Un peu de texte, une portion en emphase

• On lui affecte des attributs.

• On l'insère dans le document

La création d'un élément se fait avec la méthode createElement(), un

• On va ajouter notre élément <a> dans

• il suffit de récupérer cet élément (p), et d'ajouter notre

L'élément a été inséré, seulement il manque le contenu

• Exemple : on crée un élément <hr />, et on veut un deuxième,

• Exemple : le contenu textuel (pour rappel, il s'agit du premier enfant de <a>) va

• la méthode removeChild() retourne l'élément supprimé, ce qui veut dire qu'il

Pour cela il suffit d'obtenir une référence de cet élément : id

On peut directement accéder aux attributs id et class d'un élément

Il suffit d'en connaitre une référence, par getElementById()

Syntaxe La lecture ou la modification des propriétés de style :

Si souris ne passe pas sur ce paragraphe Si souris passe sur ce paragraphe

Vous aimerez peut-être aussi

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.