Chapitre 2 – JavaScript et Html
Partie 2 : Manipulation du DOM
2
1- Introduction
Quand une page web est chargée, le navigateur crée plusieurs objets pour représenter les
informations y figurant.
Ces objets sont classés de manière hiérarchique, l'objet le plus haut dans la hiérarchie (appelé
aussi racine car la hiérarchie est arborescente) étant un objet de la classe window
3
1- Introduction
Le schéma ci-dessous montre
l'organisation des différentes classes
dans le modèle d'objets d’un
document Html
4
1- Introduction
La programmation côté client (javascript par exemple) permet de modifier certaines parties d’un
document HTML sans recharger toute la page.
Il y a plusieurs avantages :
on évite de surcharger le serveur et le trafic réseau
on améliore la réactivité de l’application web pour le plus grand bonheur de l’utilisateur.
5
1- Introduction
Chaque page web s'affiche dans une fenêtre C'est l'objet fenêtre (window).
Il correspond à un onglet pour les nouveaux navigateur navigateurs.
Dans chaque fenêtre, il y a un document Html -> C'est l'objet document.
L’objet fenêtre contient l'objet document, qui lui-même peut contenir d’autres objets.
6
2- Objet window
L’objet window représente la fenêtre du navigateur actuellement ouverte.
Pour les navigateurs qui supportent les onglets, chaque onglet va posséder son propre objet window.
Voici une liste de quelques propriétés de cet objet:
Propriété Rôle
document Utilisé pour gérer le contenu de la page chargée
navigator Représente l’état et l’identité du navigateur et qu’on va utiliser avec l’API
Geolocation ;
history Permet de manipuler l’historique de navigation du navigateur
location Fournit des informations relatives à l’URL de la page courante ;
screen Permet d’examiner les propriétés de l’écran qui affiche la fenêtre courante
Vous pouvez vous référer à : https://developer.mozilla.org/fr/docs/Web/API/Window pour d’ample
détails sur l’objet window.
7
2- Objet window
L’objet window est un objet dit « implicite » : nous n’aurons généralement pas besoin de le
mentionner de manière explicite pour utiliser les méthodes (ou fonctions globales) et propriétés
(ou variables globales) lui appartenant.
Exemple 1 : Pour lancer une alert (qui est déjà une fonction de l’objet window) :
window.alert("Html"); ou bien alert("Html");
Exemple 2 : Pour rediriger la page courante vers le site de « google.com » :
location.href ="https://www.google.com/"
Ou bien
window.location.href ="https://www.google.com/"
8
3- Objet document
L'interface document sert de point d'entrée dans le contenu de la page Web. Il permet de
manipuler tous les objets qui sont inclus dans le document HTML (images, textes, formulaires...).
Le tableau suivant décrit une liste de quelques propriétés de cet objet window :
Propriété Rôle
document.bgColor Renvoie ou définit la couleur d'arrière-plan du document
courant
document.body Renvoie l'élément <body> du document en cours
document.cookie Renvoie une liste des cookies du document, séparés par des
points virgules, ou définit un cookie.
document.html Renvoie l'élément <html> du document en cours
Vous pouvez vous référer de : https://developer.mozilla.org/fr/docs/Web/API/Window pour d’ample détails sur
l’objet window.
9
4- DOM
DOM : Document Object Model - Modèle Objet du document
C'est une hiérarchie d'objets destinées à interfacer un langage, pas forcement Javascript,
avec un document XML ou HTML.
Au chargement d’un document HTML, un arbre de la page est élaboré via le DOM.
Chacun des éléments est considéré comme un objet et peut jouer le rôle de nœud, auquel on
peut attacher les qualités de parent, enfant, orphelin ou frère. Cette représentation permet
d’accéder aux propriétés de chacun de ces objets ou groupes d’objets et aux méthodes qui les
équipent.
10
4- DOM
11
5 - Les fonctions de recherche d’éléments dans le DOM
Dans le modèle d'objet DOM HTML, l'objet document représente votre page web. Si vous voulez accéder à
des objets dans une page HTML, vous commencez toujours par accéder à l'objet document.
Fonction Rôle
getElementsByTagName("balise") Retourne un tableau d'éléments HTML à partir du nom de leur balise
getElementById("id") Retourne un élément (HTMLElement) du DOM à partir de son identifiant
getElementsByClassName("classe") Renvoie une collection d’objets de tous les éléments qui ont tous les noms de
classe donnés
getElementsByName("nom") Retourne une collection d'éléments HTML ayant l'attribut name qui vaut nom
querySelector(sélecteurs) 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
querySelectorAll(sélecteurs) Renvoie une liste d'éléments avec l'élément courant comme racine et qui
correspondent au groupe de sélecteurs spécifiés.
12
5 - Les fonctions de recherche d’éléments dans le DOM
Différence entre élément DOM et une collection
Les méthodes de récupération d'éléments peuvent renvoyer deux types de valeurs : soit un élément, soit
une collection d'éléments.
Un élément (ou HTMLElement) est un objet correspondant à la représentation par JavaScript d'une
balise HTML. Cet objet possède notamment diverses propriétés correspondant aux valeurs des divers
attributs que cette balise peut contenir.
Une collection (ou HTMLCollection) est un objet (comparable en fait à un tableau) comprenant
plusieurs éléments.
13
5 - Les fonctions de recherche d’éléments dans le DOM
Différence entre élément DOM et une collection
Cette différence est importante, car JavaScript ne sait traiter qu'un élément à la fois
Si vous récupérez une collection (y compris ne contenant qu'un seul élément), il sera obligatoire de traiter
les éléments qu'il contient individuellement en général avec une boucle :
une collection possède une propriété length correspondant au nombre d'éléments qu'elle contient
14
5 - Les fonctions de recherche d’éléments dans le DOM
Exemple : Soit le code Html suivant
<body>
<h1 id="titre">HTML5!</h1>
<p> Paragraphe N 1
<b> texte gras </b> et <b> un autre texte gras </b>
</p>
<h2> <b>Titre</b> </h2>
<p> Paragraphe N 2</p>
</body>
15
5 - Les fonctions de recherche d’éléments dans le DOM
1) Accéder à l’élément ayant id='titre' let element1 = document.getElementById("titre")
2) Accéder à toutes les pages
// elements : un tableau contenant des références vers tous les paragraphes
let elements = document.getElementsByTagName("p")
//elements[0] : accès au premier paragraphe
3) Accéder au premier texte gras <b> dans un paragraphe
let element2 = document.querySelector("p b")
4) Accéder à tous les textes gras dans un paragraphe
let elements = document.querySelectorAll("p b")
16
6- Propriétés et méthodes des éléments du DOM
HTMLElement : Il s’agit d’une interface basique regroupant les propriétés reflétant des
caractéristiques intrinsèques aux éléments HTML présents dans le document, ou plutôt des
nœuds du DOM au travers desquels ils sont représentés.
17
6- Propriétés et méthodes des éléments du DOM
Vous trouvez dans le tableau ci-après des exemples des attributs et de méthodes de HTMLElement
Attribut ou fonction Rôle
innerText ou contentText Accéder au contenu texte d'un élément HTML
innerHtml Accéder au contenu Html d’un élément Html
style Accéder à tous les styles CSS de l’élément Html
style.* Accéder à des propriétés CSS individuelles de la forme style.width,
style.fontSize, style.color, style.listStyleType, etc.
getAttribute(attr) Renvoie la valeur de l’attribut attr
setAttribute(' attribute ',' new value ') Pour modifier la valeur d'un attribut HTML
value Accéder à la valeur d’un champ de type input. Peut être modifié
(avec = ) pour changer la valeur de l’input
checked Retourne true si un input (radio ou checkbox) coché, ou false si
décoché.
selected Retourne true si une option d’un select est sélectionnée ou false
sinon.
18
6- Propriétés et méthodes des éléments du DOM
Exemple 1 : modifier la source (attribut src) d’une image
<body>
<img id='img' src=''>
<script>
//sélectionner l’image par son id
let element = document.getElementById("img")
//modifier la source de l’image
element.setAttribute('src','monteau.jfif')
</script>
</body>
19
6- Propriétés et méthodes des éléments du DOM
Exemple 2 : les éléments Html de texte
<body>
<h1 id="titre">HTML5!</h1>
Soit le code Html suivant <p> Paragraphe N 1
<b> texte gras </b> et <b> un autre texte
gras </b>
</p>
<h2> <b>Titre</b> </h2>
<p> Paragraphe N 2</p>
</body>
20
6- Propriétés et méthodes des éléments du DOM
Exemple 2 : les éléments Html de texte
<script>
/* Modifier contenu de l’élément d’id=’titre’ à JavaScript */
let element1 = document.getElementById("titre")
element1.innerText = 'JavaScript'
/* Modifier contenu de l’élément d’id=t2 à jQuery et de couleur rouge */
let element2 = document.getElementById("t2")
element2.innerHTML = "<span style='color:red'>jQuery</span>"
/* Tous les paragraphes seront de couleur bleue */
let elements = document.getElementsByTagName("p")
for(let i=0 ; i< elements.length;i++)
elements[i].style.color='blue'
</script>
21
6- Propriétés et méthodes des éléments du DOM
Exemple 2 : les éléments Html de texte
22
6- Propriétés et méthodes des éléments du DOM
Exemple 3 : input type=text
Soit un input text dont Affichage et le code Html sont comme suit
Nom <input type="text" name="nom" value="ali" id='nom'>
Script qui manipule l’input
//récupérer l'élément Html du input nom
let elementNom = document.getElementById('nom')
//afficher le nom dans alert
alert(elementNom.value) //affiche ahmed
//modifions le contenu de l’input
elementNom.value = 'ali’
23
6- Propriétés et méthodes des éléments du DOM
Exemple 4 : input type=radio
Soit l’affichage et le code Html de 2 inputs radio de mêmes noms
Affichage
Niveau : <input type="radio" name="n1" value="debutant">debutant
Code
<input type="radio" name="n1" value="pro" checked>pro
24
6- Propriétés et méthodes des éléments du DOM
Exemple 4 : input type=radio
/*récupérer les éléments Html du input radio ayant comme name=n1
elementsNiveau : sera de type tableau d’éléments Html étant donné que
plusieurs boutons radios portent le même name */
Voici le script qui
permet d’afficher let elementsNiveau = document.getElementsByName("n1")
dans une alert le
contenu du bouton
/* afficher dans une alert la value cochée du input radio
radio coché
en parcourant le tableau elementsNiveau
*/
for(let i=0; i<elementsNiveau.length; i++)
{
if(elementsNiveau[i].checked==true)
alert(elementsNiveau[i].value)
}
25
6- Propriétés et méthodes des éléments du DOM
Exemple 5 : checkbox
•Soit l’affichage et le code Html de 3 inputs checkbox de mêmes noms
Connaissances:
<input type="checkbox" name="c1" value="CSS"> CSS
<input type="checkbox" name="c1" value="Html">Html
<input type="checkbox" name="c1" value="JS" checked>JavaScript
•Voici le script qui permet d’afficher dans une alert les contenus des cases cochées
//récupérer les éléments Html du input checkbox
let elementsConnaissances = document.getElementsByName("c1")
/* afficher dans une alert la value cochée du input radio
en parcourant le tableau elementsNiveau
*/
for(let i=0; i<elementsConnaissances.length; i++)
{
if(elementsConnaissances[i].checked==true)
alert(elementsConnaissances[i].value)
}
