UNIVERSITE GASTON BERGER DE SAINT-LOUIS
Programmation Web avancée
Compléments à la programmation web
Awa DIATTARA
[Link]@[Link]
02/07/2021
Le langage JavaScript
DOM (Document Object Model)
2
Qu’est ce que DOM ?
DOM (Document Object Model) est une API (interface de
programmation) de manipulation de documents (balisés) HTML
et XML.
Il fournir une représentation structurée d’un document sous la
forme « d’arbre » permettant à des programmes de modifier sa
structure, son style et son contenu.
DIATTARA Awa Compléments à la programmation web
Qu’est ce que DOM ?
Le DOM fournit une représentation entièrement orientée objet
de la page web qui peut être manipulé à l’aide d’un langage de
script comme JavaScript.
DOM est un standard du W3C depuis sa version en 1998 (3ème
version actuellement). Normalisée par le W3C.
DOM est une recommandation complétement indépendante de
toute plateforme et langage de programmation :
o Le W3C fournit une manière d’exploiter les documents XML,
et les langages de programmation proposent leur propre
implémentation (C, C++ Java, PHP, …).
Chaque branche de l’arbre DOM contient des objets qui sont de
type Node (nœuds). Il existe plusieurs types de nœuds.
DIATTARA Awa Compléments à la programmation web
DOM
DOM permet de :
o Naviguer dans le document
o Aller directement sur un nœud
o Changer la valeur d’un nœud
o Créer ou retirer un nœud
o Modifier le CSS (Style d’un élément, Entête CSS,..)
o Modifier dynamiquement la structure du document
Faire apparaître ou disparaître des éléments en fonction d'une
action utilisateur
Créer ou initialiser des contrôles de formulaire
DIATTARA Awa Compléments à la programmation web
Ce que DOM permet de faire
Lorsqu’on demande au navigateur d’afficher une page web,
celui-ci va automatiquement créer un modèle objet de la page.
Exemple
DIATTARA Awa Compléments à la programmation web
Les objets Node ou nœud du DOM
Représente chaque nœud de l’arbre
o parentNode //Le nœud parent du nœud courant
o childNodes[n] //Retourne le nième fils du nœud courant
o firstChild //Le premier fils du nœud courant
o lastChild //Le dernier fils du nœud courant
o nextSibling //Récupérer nœud enfant suivant d'un nœud.
o prevSibling //Récupérer le nœud enfant précèdent d'un nœud.
o nodeType //Retourne le type du nœud
o attributes //Retourne les attributs du nœud
o …
DIATTARA Awa Compléments à la programmation web
Les différents types de nœuds
DIATTARA Awa Compléments à la programmation web
Interface Node
Représente chaque nœud de l’arbre
o parentNode //Le nœud parent du nœud courant
o childNodes[n] //Retourne le nième fils du nœud courant
o firstChild //Le premier fils du nœud courant
o lastChild //Le dernier fils du nœud courant
o nextSibling //Récupérer nœud enfant suivant d'un nœud.
o prevSibling //Récupérer le nœud enfant précèdent d'un nœud.
o nodeType //Retourne le type du nœud
o attributes //Retourne les attributs du nœud
o …
DIATTARA Awa Compléments à la programmation web
Exemples de récupération d’éléments
Considérons cet extrait de page
DIATTARA Awa Compléments à la programmation web
Récupération d’éléments par id
getElementById : permet de rechercher un élément grâce à son
id.
DIATTARA Awa Compléments à la programmation web
Récupération d’éléments par id
Exemple
Résultat
DIATTARA Awa Compléments à la programmation web
Récupération d’éléments par class
getElementsByClassName : rechercher des éléments grâce à la
valeur de l’attribut class.
DIATTARA Awa Compléments à la programmation web
Récupération d’éléments par tag
getElementsByTagName : recherche de tous les éléments avec
un nom de balise précis .
DIATTARA Awa Compléments à la programmation web
Récupération d’éléments par notation CSS
querySelector : prend en paramètre un sélecteur, et renvoie le
premier élément trouvé ou null si aucun élément n’a été trouvé.
querySelectorAll() : renvoie un objet appartenant à l’interface.
NodeList.
DIATTARA Awa Compléments à la programmation web
Accès au contenu des éléments et le modifier
innerHTML : permet de récupérer ou redéfinir la
syntaxe HTML interne à un élément.
outerHTML : récupérer ou redéfinir l’ensemble de la
systaxe HTML interne déun élément ou de l’élément
en soi.
textContent : contenu textuel d »un nœud et de ses
descendants.
innerText : contenau textuel visible sur le document
final déun nœud et ses descendants.
DIATTARA Awa Compléments à la programmation web
Accès aux autres éléments de l’arbre
Avec les fonctions :
o parentNode(), firstChild(), lastChild(), …
Exemples d’accès aux balises
o x = [Link]() ;
o x = [Link][0] ;
o [Link] ;
o [Link](‘id’).firstChild() ;
DIATTARA Awa Compléments à la programmation web
