Chapitre 3: Javascript Et Dom: 1. Le Document Object Model: Dom

Chapitre 3 : JavaScript et DOM
Dans ce chapitre consacré à la manipulation du code HTML, nous allons voir le concept du
DOM. Nous étudierons tout d'abord comment naviguer entre les différents nœuds qui
composent une page HTML puis nous aborderons l'édition du contenu d'une page en ajoutant,
modifiant et supprimant des nœuds.
1. Le Document Object Model : DOM

Le Document Object Model (abrégé DOM) est une interface de programmation pour les
documents HTML.
Une interface de programmation, qu'on appelle aussi une API (pour Application Programming
Interface), est un ensemble d'outils qui permettent de faire communiquer entre eux plusieurs
programmes ou, dans le cas présent, différents langages.
Le DOM est donc un ensemble d’outils qui va nous permettre, via le JavaScript, d'accéder au
code HTML d'une page Web. C'est grâce au DOM que nous allons pouvoir modifier des
éléments HTML (afficher ou masquer un<div>par exemple), en ajouter, en déplacer ou même
en supprimer.
1.1 La structure DOM

Le DOM représente la page Web par un arbre : une hiérarchie d'éléments. On peut donc
schématiser une page Web simple comme ceci :
1
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de la page</title>
</head>
<body>
<div>
<p>Du texte <a>et un lien</a></p>
</div>
</body>
</html>
Ainsi, 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.
1.2 L'objet window

L'objet window est ce qu'on appelle un objet global qui représente la fenêtre du navigateur.
C'est à partir de cet objet que le JavaScript est exécuté.
Si nous reprenons notre « Hello World! » du début, nous avons :
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script>
alert('Hello world!');
</script>
</body>
</html>
En fait, alert()n'est pas vraiment une fonction. Il s'agit en réalité d'une méthode
appartenant à l'objet window. Mais l'objet window est dit implicite, c'est-à-dire qu'il n'y a
généralement pas besoin de le spécifier. Ainsi, ces deux instructions produisent le même effet,
à savoir ouvrir une boîte de dialogue :
window.alert('Hello world!');
alert('Hello world!');
L’objet window possède plusieurs propriétés et méthodes. Par exemple, la propriété en

lecture seule window.history renvoie une référence à l'objet History, qui offre la possibilité
de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre
dans lesquels la page courante est chargée).
Exemple :
history.back(); // similaire au bouton de retour
2
1.3 L’objet document
L'objet document est un sous-objet de window, l'un des plus utilisés. Et pour cause, il
représente la page Web et plus précisément la balise <html>. C'est grâce à cet élément-là que
nous allons pouvoir accéder aux éléments HTML et les modifier.
2. Accéder aux éléments HTML

Méthode : getElementById()
Syntaxe :
var element = document.getElementById(id);
Description :
La méthode getElementById() de Document renvoie un objet Element représentant
l'élément dont la propriété id correspond à la chaîne de caractères spécifiée. Étant donné
que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile
d'accéder rapidement à un élément spécifique.
Exemple :
<p id="intro">...</p>
<script>
var para = document.getElementById('intro');
alert(para);
</script>
Le script affiche : object HTMLParagraphElement

Méthode : getElementsByTagName()
Syntaxe :
var elements = document.getElementsByTagName(name);
Description :
Renvoie une liste des éléments sous forme de tableau ayant le nom de balise name. Cette
méthode est accessible sur n'importe quel élément HTML et pas seulement sur l'objet
document. En paramètre de cette méthode la chaîne de caractères contenant un astérisque
* récupérera tous les éléments HTML contenus dans l'élément ciblé.
Exemple :
var divs = document.getElementsByTagName('div');
for (var i = 0, c = divs.length ; i < c ; i++) {
alert('Element n° ' + (i + 1) + ' : ' + divs[i]);
}
Le script permet de récupérer tous les <div> de la page.

Méthode : querySelectorAll()
Syntaxe :
var elements = document.querySelectorAll(selecteurs);
Description :
La méthode querySelectorAll()de Element retourne une liste des éléments correspondants
aux sélecteurs CSS selecteurs.
3
Exemple :
Pour obtenir une liste des nœuds de tous les éléments <p> dans le document :
var r1 = document.querySelectorAll("p");
Cet exemple renvoie la liste de tous les éléments div du document dont l'attribut de classe a
pour valeur "note" ou "alert" :
var r2 = document.querySelectorAll("div.note, div.alert");
On obtient une liste des éléments <p> dont l'élément parent immédiat est un div avec la classe
"highlighted" et qui sont situés dans un conteneur dont l'identifiant est "test".
var c = document.getElementById("test");
var r3 = c.querySelectorAll("div.highlighted > p");
Méthode : querySelector()
Syntaxe :
document.querySelector(selectors)
Description :
La méthode querySelector() de l'interface Document retourne le premier Element dans le
document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou null si
aucune correspondance n'est trouvée.
Exemple :
document.querySelector(".example");
Obtenir le premier avec class = "example"
document.querySelector("p.example");
Obtenir le premier élément <p> du document avec class = "example":
document.querySelector("a[target]");
Obtenir le premier élément <a> du document qui a un attribut target
3. Editer les éléments HTML
3.1 Les attributs

Méthode : getAttribute()
Syntaxe :
attribut = element.getAttribute(nom_attribut)
Description :
getAttribute renvoie la valeur de l’attribut nom_attribut de l'élément spécifié. Si l'attribut
n'existe pas, la valeur renvoyée sera soit null soit "" (une chaîne vide)
Exemple :
<a id="monLien" href="mapage.html" target="att">Accéder aux attributs</a>.
<script>
var x = document.getElementById("monLien").getAttribute("href");
alert(x) ;
</script>
4
Méthode : setAttribute()
Syntaxe :
Element.setAttribute(name, value) ;
Description :
Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si
l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom
et la valeur spécifiés.
Exemple :
<script>
var x =
document.getElementById("monLien").setAttribute("href","new.html");
</script>
Propriétés : Les attributs accessibles

Syntaxe :
elementHTML.nomAttribut
Description :
Pour la plupart des éléments courants comme <a>, il est possible d'accéder à un attribut via
une propriété.
Exemple :
<script>
var x = document.getElementById("monLien") ;
var t = x.href ;
alert(t) ;
x.href="new.html"
</script>
Propriété : className
Syntaxe :
var cName = element.className;
element.className = cName;
Description :
className définit et obtient la valeur de l'attribut class de l'élément spécifié.
Exemple :
<style>
.blue {
background: blue;
color: white;
}
</style>
<div id="monTexte">
<p>blablabla <p>
</div>
<script>
document.getElementById('myColoredDiv').className = 'blue';
</script>
5
3.2 Le contenu
Propriété : innerHTML
Syntaxe :
var x = element.innerHTML;
element.innerHTML = htmlString;
Description :
La propriété Element.innerHTML de Element récupère ou définit la syntaxe HTML décrivant
les descendants de l'élément.
Exemple :
<ul id="maListe">
<li>Café</li>
<li>Thé</li>
</ul>
<script>
var x = document.getElementById("maliste").innerHTML;
alert(x);
</script>
Le script affiche :
<li>Café</li>
<li>Thé</li>
document.body.innerHTML = "";
Efface le contenu entier du document en effaçant le contenu de l'attribut body du document.
Propriété : textContent
Syntaxe :
var texte = element.textContent;
element.textContent = "ceci est un simple exemple de texte";
Description :
La propriété Node.textContent représente le contenu textuel d'un nœud et de ses
descendants.
Exemple :
<ul id="maListe">
<li>Café</li>
<li>Thé</li>
</ul>
<script>
var x = document.getElementById("maliste").textContent;
alert(x);
</script>
Le script affiche :
Café
Thé
6
<p id="demo"> Cet élément contient des espaces supplémentaires et
contient <span>un élément span</span></p>
<script>
alert("avec innerHTML "+document.getElementById("demo").innerHTML) ;
alert("avec textContent "+document.getElementById("demo").textContent) ;
</script>
Le script affiche
avec innerHTML Cet élément contient des espaces supplémentaires et contient <span> un
élément span</sapn>
avec textContent Cet élément contient des espaces supplémentaires et contient un élément
span
4. Naviguer entre les nœuds
4.1 Propriétés
Propriété : parentNode
Syntaxe :
var x = node.parentNode
Description :
La propriété parentNode renvoie le nœud parent du nœud spécifié, en tant qu'objet Node.
Exemple :
<ul>
<li id="monLi">Coffee</li>
<li>Tea</li>
</ul>
<script>
var x = document.getElementById("monLi").parentNode.nodeName;
alert(x);
</script>
Le script affiche UL
Propriétés : nodeType et nodeName

Syntaxe :
var typeN = element.nodeType ;
var nomN = element.nodeName ;
Description :
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.
Numéro Type de nœud
1 Nœud élément
2 Nœud attribut
3 Nœud texte
8 Nœud pour commentaire
7
Exemple :
<p id="monPara"> Ceci est un paragraphe </p>
<script>
var p = document.getElementById('monPara');
alert(p.nodeType + '\n' + p.nodeName);
</script>
Le script affiche :
1
P
4.2 Parcourir les nœuds

Méthodes : firstChild et lastChild
Syntaxe :
var x = node.firstChild ;
var y = node.lastChild ;
Description :
firstChild et lastChild servent respectivement à accéder au premier et au dernier enfant
d'un nœud.
Exemple :
<p id="monPara">Un peu de texte, <a>un lien</a> et <strong>une portion en
emphase</strong></p>
<script>
var paragraph = document.getElementById('monPara');
var first = paragraph.firstChild;
var last = paragraph.lastChild;
alert(first.nodeName);
alert(last.nodeName);
</script>
Le script affiche :
#text
STRONG
Propriété : nodeValue
Syntaxe :
valeur = node.nodeValue;
Description :
Pour le nœud lui-même, nodeValue renvoie null. Pour des nœuds texte nodeValue renvoie
le contenu du nœud. Pour les nœuds d'attributs, il s'agira de la valeur de l'attribut.
Exemple :
<script>
var last = paragraph.lastChild;
alert(first.nodeValue);
8
alert(last.nodeValue);
alert(last.fristChild.nodeValue);
</script>
Le script affiche :
Un peu de texte,
null
une portion en emphase
Propriété : childNodes
Syntaxe :
var enfants = element.childNodes;
Description :
La propriété en lecture seule Node.childNodes renvoie une liste de nœuds enfants de
l'élément donné avec le premier nœud enfant affecté à l'index 0.
Exemple :
<script>
var enfants = paragraph.childNodes;
for (var i = 0, c = enfants.length; i < c; i++)
{
if (enfants[i].nodeType == 1) { // C'est un élément HTML
alert(i+" "+enfants[i].firstChild.nodeValue);
} else { // C'est certainement un noeud textuel
alert(i+" "+enfants[i].nodeValue);
}
}
</script>
Le script affiche
0 Un peu de texte,
1 un lien
2 et
3 une portion en emphase
Propriétés : nextSibling et previousSibling

Syntaxe :
nextNode = node.nextSibling
previousNode = node.previousSibling;
Description :
La propriété en lecture seule Node.nextSibling renvoie le nœud suivant immédiatement le
nœud spécifié dans la liste des enfants de son nœud parent, ou null si le nœud spécifié est le
dernier dans cette liste.
9
La propriété en lecture seule Node.previousSibling renvoie le nœud précédant
immédiatement le nœud courant dans la liste de son parent, ou null s'il s'agit du premier
nœud de la liste.
Exemple :
<p id="myP">Un peu de texte, <a>un lien</a> et <strong>une portion en
<script>
var paragraph = document.getElementById('myP');
var last = paragraph.lastChild
alert(first.nextSibling.firstChild.nodeValue); // Affiche « un lien »
alert(last.previousSibling.nodeValue); // affiche « et »
</script>
5. Changer la structure DOM
Méthode : createElement()
Syntaxe :
var element = document.createElement(tagName);
Description :
Crée un élément HTML du type spécifié par tagName ou un HTMLUnknownElement si tagName
n’est pas reconnu.
Exemple :
var newLink = document.createElement('a');
Méthode : appendChild()
Syntaxe :
var elementAjoute = element.appendChild(enfant);
Description :
La méthode Node.appendChild() ajoute un nœud à la fin de la liste des enfants d'un nœud
parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document,
appendChild() le déplace de sa position actuelle vers une nouvelle position.
Exemple :
document.getElementById('myP').appendChild(newLink);
Méthode : createTextNode()
Syntaxe :
var text = document.createTextNode(données);
Description :
Crée un nouveau nœud de texte.
Exemple :
var newLinkText = document.createTextNode("Iset Sousse");
newLink.appendChild(newLinkText);
10
Méthode : cloneNode()
Syntaxe :
var dupNode = node.cloneNode([deep]);
deep Facultatif (profondeur)
true (vrai) si les enfants du nœud doivent aussi être clonés ou false
(faux) si seul le nœud spécifié doit l'être.
Description :
La méthode Node.cloneNode() renvoie une copie du nœud sur lequel elle a été appelée.
Exemple :
// On va cloner un élément créé :
var hr1 = document.createElement('hr');
var hr2 = hr1.cloneNode(false); // ne pas cloner les enfants
// Ici, on clone un élément existant :

var paragraph1 = document.getElementById('myP');
var paragraph2 = paragraph1.cloneNode(true);
/* L'élément est cloné, mais pas « inséré » tant que l'on n'a pas appelé
appendChild() :*/
paragraph1.parentNode.appendChild(paragraph2);
Méthode : replaceChild()
Syntaxe :
replacedNode = parentNode.replaceChild(newChild, oldChild);
Description :
La méthode Node.replaceChild() remplace un nœud enfant du nœud spécifié par un autre
nœud.
Exemple :
<p id="myP">Un peu de texte <a>et un lien</a></p>
<script>
var link = document.querySelector('a');
var newLabel = document.createTextNode('et un hyperlien');
link.replaceChild(newLabel, link.firstChild);
</script>
Méthode : removeChild()
Syntaxe :
var oldChild = node.removeChild(child);
ou
node.removeChild(child);
• child est le nœud enfant à retirer du DOM.
• node est le nœud parent de child.

• oldchild conserve une référence au nœud enfant retiré. oldchild === child.
11
Description :
La méthode Node.removeChild() retire un nœud enfant de l'arbre DOM et retourne le nœud
retiré.
Exemple :
var link = document.querySelector('a');
var oldLink = link.parentNode.removeChild(link); /* On supprime l'élément
et on le garde en stock */
document.body.appendChild(oldLink); /* On réintègre ensuite l'élément
supprimé où on veut et quand on veut*/
Méthode : hasChildNodes()
Syntaxe :
resultat =element.hasChildNodes();
Description :
La méthode Node.hasChildNodes() renvoie une valeur booléenne indiquant si le nœud
actuel possède des nœuds enfants ou non
Exemple :
<script>
var paragraph = document.querySelector('p');
alert(paragraph.hasChildNodes()); // Affiche true
</script>
Méthode : insertBefore()
Syntaxe :
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
Description :
La méthode Node.insertBefore() insère un nœud juste avant le noeud de référence en tant
qu'enfant du nœud parent spécifié. Si l'enfant donné est une référence à un noeud existant
dans le document, insertBefore() le déplace vers sa nouvelle position
Exemple :
<script>
var paragraph = document.querySelector('p');
var emphasis = document.createElement('em'),
emphasisText = document.createTextNode(' en emphase légère ');
emphasis.appendChild(emphasisText);
paragraph.insertBefore(emphasis, paragraph.lastChild);
</script>
12

Chapitre 3: Javascript Et Dom: 1. Le Document Object Model: 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

Chapitre 3: Javascript Et Dom: 1. Le Document Object Model: Dom

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 3 : JavaScript et DOM

1. Le Document Object Model : DOM

1.1 La structure DOM

1.2 L'objet window

L’objet window possède plusieurs propriétés et méthodes. Par exemple, la propriété en

2. Accéder aux éléments HTML

Le script affiche : object HTMLParagraphElement

Le script permet de récupérer tous les <div> de la page.

3. Editer les éléments HTML

3.1 Les attributs

Propriétés : Les attributs accessibles

Efface le contenu entier du document en effaçant le contenu de l'attribut body du document.

4. Naviguer entre les nœuds

Propriétés : nodeType et nodeName

4.2 Parcourir les nœuds

Propriétés : nextSibling et previousSibling

5. Changer la structure DOM

// Ici, on clone un élément existant :

• child est le nœud enfant à retirer du DOM.

• node est le nœud parent de child.

Vous aimerez peut-être aussi