Scribd
Importer
3 vues25 pages

JS Dom

Le document traite de la manipulation du DOM en JavaScript et HTML, expliquant comment le navigateur crée des objets pour représenter une page web. Il décrit les objets 'window' et 'document', ainsi que les méthodes pour interagir avec les éléments HTML, comme 'getElementById' et 'querySelector'. Enfin, il aborde les propriétés et méthodes des éléments du DOM, illustrant leur utilisation avec des exemples pratiques.

Transféré par

hadyeejandoubie
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
3 vues25 pages

JS Dom

Le document traite de la manipulation du DOM en JavaScript et HTML, expliquant comment le navigateur crée des objets pour représenter une page web. Il décrit les objets 'window' et 'document', ainsi que les méthodes pour interagir avec les éléments HTML, comme 'getElementById' et 'querySelector'. Enfin, il aborde les propriétés et méthodes des éléments du DOM, illustrant leur utilisation avec des exemples pratiques.

Transféré par

hadyeejandoubie
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 25

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)
}

Vous aimerez peut-être aussi