Cours - Technologies WEB2.0 - Ch3 - DOM

Plan
 Chapitre 0: Concepts du WEB2.0

 Chapitre 1: HTML5 &CSS3
 HTML5
 CSS3
 Chapitre 2: JavaScript
 Chapitre 3: Le DOM
 Chapitre 3: XML
 Chapitre 4: AJAX
 Chapitre 5: JQuery
DOM
 Un DOM (Document Object Model) est une description
structurée d’un document HTML ou XML
 Un DOM est une API qui permet de modifier structure,

contenu et style d’un document XML ou HTML
 Rappel: Une interface de programmation, qu'on appelle aussi
une API (pour Application Programming Interface), est un
ensemble d'outils qui permettent de faire communiquer plusieurs
programmes entre eux
 Avant la standardisation du DOM par le W3C, chaque

navigateur Web implémentait ses propres méthodes afin de
manipuler les éléments des pages HTML, ce qui obligeait les
développeurs Web à coder différemment en fonction du
navigateur.
Spécifications du DOM
Trois spécifications du DOM ont été définies :
 1998, le DOM niveau 1 posait les bases de la représentation d'un

document sous forme d'arbre et de nœuds, incluant la
navigation au sein de celui-ci .
 2000, le DOM niveau 2 apporte de nouvelles fonctionnalités,

notamment l’ajout de la gestion des événements et des feuilles
de style et de nouvelles méthodes de parcours de l’arbre (le
fameux getElementById().
 2004, le DOM niveau 3 continue d'apporter de nouvelles

spécifications. Il ajoute une interface permettant les opérations
de chargement et manipulation de document XML.
 Le DOM niveau 4 est toujours en cours de développement

DOM
En termes techniques:
 Un DOM est un arbre avec des nœuds
 Chaque nœud est un objet pour lequel il existe
des méthodes et des propriétés (qu’on peut
"lire" ou modifier).
 Ces interfaces (classes, méthodes et
propriétés) sont implémentées pour plusieurs
langages comme JavaScript, PhP 5, Java,
Python, Perl, ActiveX, ...
 Leurs noms sont les mêmes dans toutes ces
implémentations
Structure du DOM
 Dans le DOM, tout est « Node »
 Le document lui même est un “document node”
 Tous les éléments HTML sont des “element
nodes”
 Tous les attributs HTML sont des “attribute
nodes”
 Les textes à l’intérieur des éléments HTML sont
des “text nodes”
 Les commentaires sont des “comment nodes”
Exemple
<html>
<head>
<title>Sample DOM Document</title>
</head>
<body>
<h1>An HTML Document</h1>
<p>This is a <i>simple</i> document.
</body>
</html>
Modèle avec lequel le
Document navigateur fonctionne
<html>
<head> <body>
<title>
"Sample DOM Document"

<h1> <p>
"An HTML Document"
Les balises HTML sont reliées

entre elles par des relations
parent ou enfant. "This is a" <i> "document"
"simple"
Exercice
Etablir l’arbre DOM correspondant
au code suivant:
<div id="maZone">
<span><b>Un texte</b></span>
<div id="monAutreZone">
Un autre texte
</div>
</div>
Une 1ére Solution
<div id="maZone">
<span>
<b>
Un texte
</b>
</span>
Un autre texte
</div>
</div>
La classe Node
 La classe centrale représentant un nœud DOM est
Node. Elle définit différentes propriétés afin de
donner accès aux informations relatives au nœud,
telles que son type et son nom.
 Propriétés de la classe Node :
Propriété Description
attributes Attributs du nœud
nodeName Nom de la balise du nœud
nodeType Type du nœud
nodeValue Valeur de la balise. Cette valeur peut être nulle lorsque
aucune valeur n’est associée à la balise.
ownerDocument Référence le document représentant l’arbre DOM dans lequel

se trouve le nœud.
Types des nœuds
 Un arbre DOM regroupe un ensemble de nœuds
représentant différentes entités.
 Comme la classe Node est générique, elle contient
une propriété nodeType dont la valeur est un
entier, définissant le type du nœud.
Constante Valeur Description
ATTRIBUT_NODE 2 Attribut d’une balise de l’arbre
COMMENT_NODE 8 Balise de commentaire
DOCUMENT_FRAGMENT 11 nœud racine d’un fragment d’arbre
_NODE
DOCUMENT_NODE 9 nœud racine de l’arbre. Il s’agit du type de l’objet
document.
ELEMENT_NODE 1 Balise de l’arbre
TEXT_NODE 3 nœud texte de l’arbre
Accès direct aux éléments
 La méthode getElementById de l’objet document permet
d’accéder à un nœud du document en se fondant sur
l’attribut id
Exemple :
var zone = document.getElementById("maZone");
 La méthode getElementsByTagName, permet de

récupérer une liste de nœuds en se fondant sur le nom
des balises.
Exemple :
var balisesDiv = document.getElementsByTagName("div");
//On récupère l’ensemble des balises div d’un document sous la
forme d’une liste de nœuds (NodeList).
Exemple:getElementsByTagName
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to change the text of the first list item (index 0).</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";
}
</script>
</body> Résultat: Changement de Coffee en Milk

</html>
Accès direct aux
éléments
 La méthode getElementsByName retourne une liste de
nœuds dont l’attribut name est égal à la valeur spécifiée en
paramètre.
<form method="post" id="monFormulaire">

<input type="radio" name="couleur" value="rouge"/>
Rouge<br/>
<input type="radio" name="couleur" value="bleu"/>
Bleu<br/>
<input type="radio" name="couleur" value="jaune"/>
Jaune<br/>
</form>
var radios= document.getElementsByName("couleur");

//On référence directement les trois radio button
Exemple:getElementsByName
<!DOCTYPE html>
<html>
<body>
First Name: <input name="fname" type="text" value="Michael"><br>

First Name: <input name="fname" type="text" value="Doug">
<p>Click the button to get the tag name of the first element in the document that has a
name attribute with the value "fname".</p>
<p id="demo"></p>
<script>
var x = document.getElementsByName("fname")[0].tagName;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
Résultat: INPUT
</html>
Accès aux éléments à partir d’un nœud
 La classe Node permet de parcourir un arbre DOM relativement à
un nœud précis.
 Elle possède des propriétés qui permettent de référencer les nœuds
autour du nœud courant.
Propriété Description
childNodes Représente la liste des nœuds enfants sous forme d’objet NodeList.
firstChild Référence le premier nœud enfant, correspondant au premier nœud de

la liste childNodes.
lastChild Référence le dernier nœud enfant, correspondant au dernier nœud de
la liste childNodes.
nextSibling Pointe sur l’enfant suivant dont le parent est identique. Elle contient null
si le nœud est le dernier enfant.
parentNode Référence le nœud parent.
previousSibling Pointe sur l’enfant précédent dont le parent est identique. Elle contient
null si le nœud est le premier enfant.
Exemple 2:
<!DOCTYPE html>
firstChild
<html>
<body>
<p>Example list:</p>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to get the HTML content of the list's first child
node.</p>
<p id="demo"></p>
<script>
var list =
document.getElementById("myList").firstElementChild.innerHTML;
document.getElementById("demo").innerHTML = list;
}
Résultat: Coffee
</script>
</body></html>
Exemple 3: nextSibling
<!DOCTYPE html>
<html>
<body>
<p>Example list:</p>
<ul><li id="item1">Coffee (first li)</li><li id="item2">Tea (second
li)</li></ul>
<p>Click the button to get the HTML content of the next sibling of the first
list item.</p>
<p id="demo"></p>
<script>
var x = document.getElementById("item1").nextSibling.innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
Résultat: Tea (second li)
</body>
</html>
Exemple 1:childNodes
<!DOCTYPE html>
<html>
<body>
<p>Click the button get info about the body element's child nodes.</p>
<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text
is considered as nodes. Comments are also considered as nodes.</p>
<p id="demo"></p>
Résultat:
<script> #comment
function myFunction() { #text
var c = document.body.childNodes; P
var txt = ""; #text
var i; BUTTON
for (i = 0; i < c.length; i++) {
#text
txt = txt + c[i].nodeName + "<br>";
}
P
document.getElementById("demo").innerHTML = txt;
#text
} P
</script> #text
</body> SCRIPT
</html> #text
Création des nœuds
 DOM définit des méthodes permettant de créer,
d’ajouter, de remplacer ou de supprimer des nœuds
de tout type.
 Ces méthodes sont fournies par l’objet document.
var element = document.createElement("label");

var elementTexte = document.createTextNode("mon texte");
var comment = document.createComment("commentaire..");
Exemple
Une fois le nœud créé, On l’attache à un nœud existant
par la méthodes appendChild
<!DOCTYPE html>
<html>
<body>
<p>Click the button to make a BUTTON element with text.</p>
<script>
var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
document.body.appendChild(btn);
}
</script>
</body> Résultat: Création et ajout d’un nouveau
bouton CLICK ME
</html>
Création des nœuds :
insertBefore
<!DOCTYPE html>
<html>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to insert an item to the list.</p>
<script>
var newItem = document.createElement("LI");
var textnode = document.createTextNode("Water");
newItem.appendChild(textnode); Résultat:
var list = document.getElementById("myList"); Water
list.insertBefore(newItem, list.childNodes[0]);
Coffee
}
Tea
</script>
</body>
Suppression de nœud:
removeChild
<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p>Click the button to remove the first item from the list.</p>
<script>
var list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
Résultat:
</script> Tea
Milk
</body>
</html>
Manipulation des
attributs
 Tout élément du type ELEMENT_NODE peut
contenir des attributs permettant de lui ajouter
des informations.
 Un attribut possède une clé et une valeur.
 La classe Node met à disposition la propriété

attributes afin de lister ses différents attributs.
Méthodes de manipulation des
attributs de la classe Node
Méthode Paramètre Description
getAttribute Identifiant de l’attribut Référence un attribut d’un élément en utilisant son

identifiant.
hasAttribute Identifiant de l’attribut Détermine si un attribut est présent pour un élément.
removeAttribute Identifiant de l’attribut Supprime un attribut pour un élément.
setAttribute Identifiant de l’attribut Crée un attribut ou remplace un attribut existant d’un

ainsi que sa valeur élément.
Exemple de manipulation des attributs
var zone = document.getElementById("maZone");
zone.setAttribute("type", "UnType");
var valeur=zone.getAttribute("type");
alert(valeur);
zone.removeAttribute("type");
var valeur=zone.getAttribute("type");
alert(valeur); // valeur null !
L’attribut innerHTML
 L’attribut innerHTML permet de remplacer complètement le
contenu d’un élément par celui spécifié dans une chaîne de
caractères
var span = zone.getElementsByTagName("span")[0];

span.innerHTML = "<p><b>mon texte</b></p>";
 Résultat :
<div id="maZone">
<span> <p><b>mon texte</b></p> </span>
Un autre texte
</div>
</div>
Rq : innerHTML n’est pas une fonction.

L’attribut innerHTML
Avantage :
L’utilisation de l’attribut innerHTML évite de
multiples appels à la méthode appendChild
et autant de créations de nouveaux nœuds.
Inconvénient:
Ces chaînes nuisent à la maintenabilité
(modification) du code JavaScript et peuvent
conduire à des syntaxes HTML invalides.
Modification de l’arbre
DOM au chargement
 Il faut garder à l’esprit que 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.
Remarque
 L’interprétation des espaces comprises entre les

balises HTML dépend du navigateur.
 La propriété childNodes peut alors renvoyer

l’ensemble des espaces comprises entre les balises
HTML sous la forme de nœuds de type texte
(nodeType=TEXT_NODE). Il faut donc veiller à
prendre en compte ces nœuds texte lors des
traitements.

Cours - Technologies WEB2.0 - Ch3 - DOM

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cours - Technologies WEB2.0 - Ch3 - DOM

Uploaded by

Copyright:

Available Formats

Plan

 Chapitre 0: Concepts du WEB2.0

 Un DOM est une API qui permet de modifier structure,

 Avant la standardisation du DOM par le W3C, chaque

 1998, le DOM niveau 1 posait les bases de la représentation d'un

 2000, le DOM niveau 2 apporte de nouvelles fonctionnalités,

 2004, le DOM niveau 3 continue d'apporter de nouvelles

 Le DOM niveau 4 est toujours en cours de développement

"Sample DOM Document"

"An HTML Document"

Les balises HTML sont reliées

ownerDocument Référence le document représentant l’arbre DOM dans lequel

 La méthode getElementsByTagName, permet de

<button onclick="myFunction()">Try it</button>

</body> Résultat: Changement de Coffee en Milk

<form method="post" id="monFormulaire">

var radios= document.getElementsByName("couleur");

First Name: <input name="fname" type="text" value="Michael"><br>

<button onclick="myFunction()">Try it</button>

firstChild Référence le premier nœud enfant, correspondant au premier nœud de

var element = document.createElement("label");

<button onclick="myFunction()">Try it</button>

 Un attribut possède une clé et une valeur.

 La classe Node met à disposition la propriété

Méthode Paramètre Description

getAttribute Identifiant de l’attribut Référence un attribut d’un élément en utilisant son

removeAttribute Identifiant de l’attribut Supprime un attribut pour un élément.

setAttribute Identifiant de l’attribut Crée un attribut ou remplace un attribut existant d’un

var zone = document.getElementById("maZone");

var span = zone.getElementsByTagName("span")[0];

Rq : innerHTML n’est pas une fonction.

 Les traitements sur l’arbre DOM doivent donc être

 L’interprétation des espaces comprises entre les

 La propriété childNodes peut alors renvoyer

You might also like