Université Saad Dahlab de Blida
Faculté des sciences
Département de mathématiques
BENAISSI Sellami
[Link]@[Link]
1. Definition DOM
2. La structure d'une page web
3. L'objet Document
4. Accéder a un élément HTML
5. Modifier du contenu HTML
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Definition DOM
4. Accéder a un élément HTML
5. Modifier du contenu HTML
DOM : Document Object Model
Le DOM est une norme du W3C, permet aux programmes
et scripts d'accéder et de modifier dynamiquement le
contenu, la structure et le style de documents XML ou
HTML.
Le Document Object Model d’une page web va être créé automatiquement
par le navigateur lors du chargement de la page.
Programmation Avancée pour le Web DOM 3
1. Définition DOM
[Link] = 'blue';
2. La structure d'une page web
3. L'objet Document
Definition DOM
4. Accéder a un élément HTML
5. Modifier du contenu HTML
Le DOM est l’interface programmatique (API) qui permet au
développeur web d’accéder et de manipuler le contenu d’une page
web.
• 1 . Il fournit une représentation structurée et orientée objet des
éléments et du contenu d’une page avec les méthodes permettant de
modifier les propriétés de ces objets.
[Link]('texte').textContent = '<span>Texte
modifié</span>';
[Link] = 'blue';
[Link](“p a").href=‘[Link]
Programmation Avancée pour le Web DOM 4
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Definition DOM
4. Accéder a un élément HTML
5. Modifier du contenu HTML
• 2 . Il fournit aussi des méthodes permettant l’ajout et la suppression
de tels objets, permettant ainsi au développeur web de créer du
contenu dynamique en modifiant le contenu, la structure et le style du
document.
let newP = [Link]('p');
let newTexte = [Link]('Texte écrit en JavaScript');
Programmation Avancée pour le Web DOM 5
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Definition DOM
4. Accéder a un élément HTML
5. Modifier du contenu HTML
• 3 . Il fournit aussi une interface de gestion des événements, pour
capturer les actions du navigateur et de son utilisateur, et d’y réagir.
let b1 = [Link]('button');
[Link] = function(){alert('Bouton cliqué')};
[Link]('click', function(){alert('Bouton cliqué')});
Programmation Avancée pour le Web DOM 6
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Definition DOM
4. Accéder a un élément HTML
5. Modifier du contenu HTML
DOM : Document Object Model
Le DOM étant une API, il est utilisé depuis un langage de
programmation qui s’exécute dans le navigateur (eg:
JavaScript).
le DOM a été conçu pour être indépendant de tout langage.
Programmation Avancée pour le Web DOM 7
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
La structure d'une page web
4. Accéder a un élément HTML
5. Modifier du contenu HTML
Une page web n'est rien d'autre qu'un ensemble de
balises imbriquées les unes dans les autres. On peut
la représenter sous une forme hiérarchisée appelée
une arborescence.
L'élément <html> en constitue la racine et contient deux
éléments : <head> et <body>, qui contiennent eux-mêmes
plusieurs sous-éléments.
Programmation Avancée pour le Web DOM 8
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
La structure d'une page web
4. Accéder a un élément HTML
5. Modifier du contenu HTML
Tout dans la page HTML va être considéré comme
un nœud « node » :
le document HTML lui même,
les éléments HTML,
les attributs HTML,
le texte à l’intérieur des éléments,
etc...
Programmation Avancée pour le Web DOM 9
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
La structure d'une page web
4. Accéder a un élément HTML
5. Modifier du contenu HTML
Il existe différents types de nœuds. Dans un
document HTML ordinaire existent dans tous les cas
trois types de nœud importants qu'il nous faut
distinguer :
les nœuds-élément (element_node),
les nœuds-attribut (attribute_node),
et les nœuds-texte (text_node).
Programmation Avancée pour le Web DOM 10
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
La structure d'une page web
4. Accéder a un élément HTML
5. Modifier du contenu HTML
<html> Element Text:
My page
Element <head>
<head> <title>
<title> My page </title> Element
<meta charset="utf-8" /> <meta> Attribute
rel
<link rel="stylesheet" Element
Element <html>
<Link>
Document
href="[Link]" /> Attribute
href
</head>
Text:
<body> Element <h1> Titre1
<h1> Titre1</h1>
Element <body>
<p> Salam,</p> Text:
Element <p> Salam
<p> This is my web page <a
href="[Link] Text:
This
web is my
page
>.</p>
Attribute
href
</body> Element <p> Element <a>
</html> Text:
.
Programmation Avancée pour le Web DOM 11
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
La structure d'une page web
4. Accéder a un élément HTML
5. Modifier du contenu HTML
Et voici le DOM relatif à cette page qui va être créé par le navigateur :
Element Text:
<title> My page
Element Element Attribute Text:
<head <meta> Charset utf-8
> Attribute Text:
Element rel stylesheet
Document
Attribute Text:
<html>
<Link>
Element
href [Link]
Element Text:
<h1> Titre1
Element Text:
Element <p> Salam
<body> Text:
This is my web page
Attribute Text:
Element href [Link]
Element
<p> <a> Text:
Text: Here
.
Programmation Avancée pour le Web DOM 12
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
L'objet Document
4. Accéder a un élément HTML
5. Modifier du contenu HTML
L'objet document est un objet important, qui représente l'ensemble de l'arborescence du
document analysé. Il possède de nombreuses propriétés et méthodes.
le document HTML en soi est représenté dans le DOM par un
objet Document. L’objet Document, comme tous les autres
objets créés par le DOM, est un nœud.
Cet objet Document va donc représenter notre page web en soi
et disposer de méthodes nous permettant de modifier cette
page web.
L’objet Document va également contenir tous les autres objets
créés par le DOM, comme par exemple l’objet Element.
Programmation Avancée pour le Web DOM 13
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
1. Accès direct
L’objet Document possède de nombreuses propriétés et méthodes. Cinq de ces
dernières permettent de « pointer » directement un ou plusieurs éléments dans
le document.
La méthode getElementById() ;
La méthode getElementsByTagName() ;
La méthode getElementsByClassName() ;
La méthode querySelector() ;
La méthode querySelectorAll().
Programmation Avancée pour le Web DOM 14
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
1. Accès direct
La méthode getElementById() :
La méthode, getElementById(), va nous permettre de cibler un
élément HTML possédant un attribut id en particulier. C’est
certainement la méthode la plus utilisée.
• Si l’élément est trouvé, getElementById() va renvoyer
l’élément en tant qu’objet.
• Si aucun élément n’est trouvé, la méthode renverra la valeur
null.
let x = [Link](“demo");
Programmation Avancée pour le Web DOM 15
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
1. Accès direct
La méthode getElementsByTagName () :
La méthode getElementsByTagName() va retourner des
informations relatives à tous les éléments HTML d’un même «
genre » dans un tableau.
• Cette méthode va prendre le nom du type d’élément à
récupérer en argument.
• L’intérêt de cette méthode est qu’on va ensuite pouvoir
récupérer un élément en question en utilisant un indice du
tableau créé.
let y = [Link]("p");
Programmation Avancée pour le Web DOM 16
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
1. Accès direct
La méthode getElementsByClassName() :
La méthode getElementsByClassName() va nous permettre
d’accéder aux éléments HTML disposant d’un attribut class en
particulier.
• getElementsByClassName() va prendre la valeur d’un attribut
class en argument.
• Elle va s’utiliser de manière similaire à la méthode précédente
et renvoyer également un tableau..
let y = document. getElementsByClassName(“class1");
Programmation Avancée pour le Web DOM 17
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
1. Accès direct
Pour faciliter la sélection d'éléments suivant des critères
complexes, le DOM s'est enrichi de deux nouvelles méthodes. La
première, nommée querySelectorAll, permet de rechercher des
éléments à partir d'un sélecteur CSS. autre méthode de recherche
d'éléments à partir d'un sélecteur CSS s'appelle querySelector.
Elle fonctionne de manière identique à querySelectorAll, mais
renvoie uniquement le premier élément correspondant au
sélecteur passé en paramètre.
Programmation Avancée pour le Web DOM 18
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
1. Accès direct
La méthode querySelector () :
La méthode querySelector(), qui prend en argument une
expression CSS, permet de cibler directement le premier élément
d'un ensemble de nœuds.
let x = [Link](“.class1");
let y = [Link](“#p1");
let z = [Link](“p,h1");
let w = [Link](“div p");
Programmation Avancée pour le Web DOM 19
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
1. Accès direct
La méthode querySelectorAll () :
La méthode querySelectorAll, qui prend en argument une
expression CSS, permet de cibler tous les éléments d'un
ensemble de nœuds.
• querySelector() va renvoyer des informations relatives au
premier élément trouvé correspondant au sélecteur CSS
sélectionné, tandis que querySelectorAll() va renvoyer des
informations sur tous les éléments correspondants.
• un tableau va être créé lorsqu’on utilise querySelectorAll().
Programmation Avancée pour le Web DOM 20
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
1. Accès direct
La méthode querySelectorAll () :
let x = [Link] (“.class1");
let y = [Link] (“#p1");
let z = [Link] (“p,h1");
let w = [Link] (“div p");
Programmation Avancée pour le Web DOM 21
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
1. Accès direct
Exemple:
let x = [Link](“demo");
let y = [Link]("p");
let z = [Link]("intro");
let a = [Link]("[Link]");
let b = [Link]("[Link]");
Programmation Avancée pour le Web DOM 22
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
2. Accès relatif
Les méthodes précédentes demandent de connaître précisément
soit l'identifiant, soit le nom exact du nœud cherché. Nous allons
voir maintenant comment il est possible d'accéder à des
collections de nœuds dont on ne connaît pas ces caractéristiques a
priori.
• Naviguer entre les noeuds
Programmation Avancée pour le Web DOM 23
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
2. Accès relatif
• Naviguer entre les noeuds
Vous pouvez utiliser les propriétés de nœud suivantes pour
naviguer entre les nœuds avec JavaScript:
• parentNode
• childNodes[nodenumber]
• firstChild
• lastChild
• lastElementChild
• nextSibling
• previousSibling
Programmation Avancée pour le Web DOM 24
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
2. Accès relatif
let y = [Link]
let x = element1. childNodes;
element1. childNodes[0]
Programmation Avancée pour le Web DOM 25
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
2. Accès relatif
element1. firstChild
element1. lastChild;
element1. lastElementChild;
Programmation Avancée pour le Web DOM 26
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
2. Accès relatif
element1. previousSibling
element1. nextSibling
Programmation Avancée pour le Web DOM 27
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
<html>
<head>
<title>My page</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<h1>Titre1</h1>
<p>Salam,</p>
<p id=‘demo’>This is my web page<a href="[Link]
</body>
</html>
Programmation Avancée pour le Web DOM 28
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
Element Text:
<title> My page
Element Element
<head> <meta> Attribute
Element rel
<Link> Attribute
href
Element
Document Element Text:
<html>
<h1> Titre1
Element Text:
<p> Salam
Element
Attribute
<body> id
Text:
Element This is my web page
<p> Element Attribute
<a> href
Text:
.
Programmation Avancée pour le Web DOM 29
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
var x = [Link](“demo");
var a:=[Link];
var b:=x. childNodes[1];
var c:=x. firstChild;
var d:=x. lastChild;
var e:=x. lastElementChild;
var f:=x. previousSibling;
var g:=x. nextSibling;
f
a
c
b
x
e
g null d
Programmation Avancée pour le Web DOM 30
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
2. Accéder directement à des éléments particuliers
Finalement, l’objet Document fournit également des propriétés
qui vont nous permettre d’accéder directement à certains
éléments ou qui vont retourner des objets contenant des listes
d’éléments.
body, head , links , title , url , scripts , cookie
[Link] = 'blue';
Programmation Avancée pour le Web DOM 31
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Accéder a un élément HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
2. Accéder directement à des éléments particuliers
Les propriétés qui vont le plus nous intéresser ici sont les suivantes :
• La propriété body qui retourne le nœud représentant l’élément body ;
• La propriété head qui retourne le nœud représentant l’élément head ;
• La propriété links qui retourne une liste de tous les éléments a ou area
possédant un href avec une valeur ;
• La propriété title qui retourne le titre (le contenu de l’élément title) du
document ou permet de le redéfinir ;
• La propriété url qui renvoie l’URL du document sous forme de chaine de
caractères ;
• La propriété scripts qui retourne une liste de tous les éléments script du
document ;
• La propriété cookie qui retourne la liste de tous les cookies associés au
document sous forme de chaine de caractères ou qui permet de définir un
nouveau cookie.
Programmation Avancée pour le Web DOM 32
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Modifier du contenu HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
1. Modifier le contenu d’un élément HTML
La propriété innerHTML va également nous servir à modifier le
contenu d’un élément [Link] cela, il suffit d’utiliser
innerHTML sur un élément et de lui affecter une nouvelle valeur
textuelle
<p id=‘demo’>Salam</p>
Salam
[Link](“demo").innerHTML+=‘ world’;
Salam world
Programmation Avancée pour le Web DOM 33
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Modifier du contenu HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
2. Modifier la valeur d’un attribut HTML
Pour modifier la valeur d’un attribut HTML, nous allons
généralement utiliser la propriété attribute de l’objet Element.
Pour utiliser cette propriété, nous n’allons pas écrire attribute
mais bien le nom de l’attribut donc on souhaite modifier la
valeur (comme href par exemple). Ensuite, nous n’aurons plus
qu’à affecter une nouvelle valeur à l’attribut ciblé.
<p>This is my web page<a href="[Link]
[Link](“p a").href=‘[Link]
Programmation Avancée pour le Web DOM 34
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Modifier du contenu HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
2. Modifier la valeur d’un attribut HTML
Notez également que dans le cas d’attributs non standards (ce qui est très rare), nous
utiliserons alors plutôt les méthodes getAttribute() (pour accéder à l’attribut) et
setAttribute() (pour modifier un attribut).
<p>This is my web page<a href="[Link]
[Link](“p a").href=‘[Link]
var x=[Link](“p a");
[Link](“href”, ‘[Link]
Programmation Avancée pour le Web DOM 35
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Modifier du contenu HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
3. Modifier le CSS d’un élément HTML
Pour ajouter ou modifier le style CSS d’un élément HTML, on va
utiliser la propriété style de l’objet Element suivie de la propriété
CSS à ajouter ou modifier.
<body>
<h1>Titre1</h1>
<p>Salam,</p>
<p>This is my web page<a href="[Link]
</body>
[Link](“p").[Link]=‘green’;
[Link](“p").[Link]=’35px’;
Programmation Avancée pour le Web DOM 36
1. Définition DOM
2. La structure d'une page web
3. L'objet Document
Modifier du contenu HTML
4. Accéder a un élément HTML
5. Modifier du contenu HTML
3. Modifier le CSS d’un élément HTML
<body>
<h1>Titre1</h1>
<p>Salam,</p>
<p>This is my web page<a href="[Link]
</body>
var x=document .querySelectorAll(" p,h1,h3 " ) ;
for (var i=0;i<x .length ;i++) {
x[i].style. font-family =” arial, sans-serif”;
x[i].style. color =”#FFCC66”}
Programmation Avancée pour le Web DOM 37
TP3 Exercice 1
utilisez la technologie SVG et JavaScript pour réaliser le
programme suivant, Une page Web avec :
- une zone graphique (400x400) contenant un cercle rouge (r=40)
au milieu.
- et quatre boutons pour déplacer le cercle vers le haut, le bas, la
droite et la gauche.
Programmation Avancée pour le Web JavaScript 38
TP3 Exercice 1 Solution
Sol1
<svg width="440" height="440" style="background-color:skyblue">
<circle r="40" cx="200" cy="200" fill="red" id="circl1" />
Sorry, your browser does not support inline SVG.
</svg>
<br>
<button onclick="moveUp();">moveUp</button>
<button onclick="moveDown();">moveDown</button>
<button onclick="moveLeft();">moveLeft</button>
<button onclick="moveRight() ;">moveRight</button>
<br>
Programmation Avancée pour le Web JavaScript 39
TP3 Exercice 1 Solution
Sol1
let circl=[Link]('circl1');
let cx =Number([Link]('cx'));
let cy =Number([Link]('cy'));
function moveUp(){
cy =cy-10; [Link]('cy',cy-10);
}
function moveDown(){
cy =cy+10; [Link]('cy',cy-10);
}
function moveLeft(){
cx =cx-10; [Link]('cx',cx-10);
}
function moveRight(){
cx =cx+10; [Link]('cx',cx-10);
}
Programmation Avancée pour le Web JavaScript 40
TP3 Exercice 1 Solution
Sol2
<svg width="440" height="440" style="background-color:skyblue">
<circle r="40" cx="200" cy="200" fill="red" id="circl1" />
Sorry, your browser does not support inline SVG.
</svg>
<br>
<button onclick="move(0,-10);">moveUp</button>
<button onclick="move(0,10);">moveDown</button>
<button onclick="move(-10,0);">moveLeft</button>
<button onclick="move(10,0) ;">moveRight</button>
<br>
Programmation Avancée pour le Web JavaScript 41
TP3 Exercice 1 Solution
Sol2
let cer=[Link]('circl1');
function move(x1,y1){
let x=Number([Link]('cx'));
let y=Number([Link]('cy'));
[Link]('cy',y+y1);
[Link]('cx',x+x1);
}
Programmation Avancée pour le Web JavaScript 42
TP3 Exercice 4
Écrivez un script JavaScript qui dessine un échiquier ; en utilisant
l’élément HTML <table>.
Programmation Avancée pour le Web JavaScript 43
TP3 Exercice 4
Note:
Les nouveaux noeuds DOM sont créés à l'aide de la méthode
[Link](X).en utilisant le nom de balise fourni en
paramètre ;
La méthode appendChild(Y) ajoute un nouvel enfant.
Exemple : Le code suivant ajoute un nouvel élément de liste (<li>) à la fin de
la liste:
<ul id="list"><li>Item</li></ul>
<script>
let list = [Link]("list");
let newNode = [Link]("li");
[Link](newNode);
</script>
Programmation Avancée pour le Web JavaScript 44
TP3
<script >
Exercice 4 Solution
let tbl = [Link]('table');
[Link]('border', '1');
let tbdy = [Link]('tbody');
for (let i = 0; i < 8; i++)
{
let tr = [Link]('tr');
[Link]('height', '50px');
for (var j = 0; j < 8; j++)
{
let td = [Link]('td');
if((i+j)%2 == 0)
{
[Link] = 'black';
}
[Link]('width', '50px');
[Link](td)
}
[Link](tr);
}
[Link](tbl)
</script> 45
Programmation Avancée pour le Web JavaScript
