JAVASCRIPT
Le DOM
Introduction
Le DOM (Document Object Model) définit un mode
standardisé pour structurer, accéder et mettre à jour
tous les éléments d’un document HTML
Lorsqu’une page web est chargée, le navigateur
élabore le DOM de celle-ci.
Cette structuration de la page en éléments ou en
objets est comparée à un arbre (tree).
Il faut préciser que le DOM n’est pas en soi un
langage de balise ou de programmation, mais
simplement une manière de structurer, parcourir et
manipuler un document HTML en utilisant des
méthodes et des propriétés spécifiques.
Hiérarchie des objets
L’objet Navigator
L’objet Navigator
Exemple
L’objet Document
L'objet Document est hiérarchiquement placé sous
l'objet window. Il permet de manipuler tous les
objets qui sont inclus dans le documents HTML
(images, textes, formulaires...). Il s'agit sans doute
de l'objet le plus riche et le plus important.
Nous aurons à notre dispositions des outils qui
permettent de changer le contenu et le design
d'une page d'une manière dynamique.
Principales propriétés (Document)
Titre du document : [Link]
Couleur du texte : [Link]
Couleur du fond : [Link]
Couleur de liens : [Link]
Couleur de liens visités : [Link]
Couleur de liens activés : [Link]
Adresse du document : [Link]
Date de dernière modification :
[Link]
Exemple de Propriétés
Titre du document : [Link]
= Cours JavaScript
Couleur du texte :
[Link] = #000000
Couleur du fond :
[Link] = #f1f1f1
Principales méthodes (Document)
write(ch1, ch2, ..) affiche les
chaines ou d’intérpréter des
balises HTML.
open() crée un nouveau onglet.
close() ferme le document.
[Link], [Link]
et [Link]
Arborescence du document
Exemple 1 :
Arborescence du document
Exemple 2 :
Arbre Dom
Terminologie
Noeud élément (element node): N'importe quel élément
Noeud texte (text node) : Element texte
Racine (root): Le noeud de plus haut niveau dans l'arbre. Dans le
cas d'un document HTML, il s'agit toujours du noeud html
Enfant (child): Un noeud directement à l'intérieur d'un autre
noeud
Descendant (descendent): Un noeud n'importe où à l'intérieur
d'un autre noeud.
Parent (parent): Un noeud qui a un autre noeud directement à
l'intérieur
Ancêtre (ancestor): Un noeud qui a un autre noeud n'importe
où à l'intérieur
Frère (sibling): Des noeuds qui ont le même parent
Arbre DOM
Lorsqu'une page Web est chargée, le navigateur crée un
Document Objet Modèle de la page.
Le modèle HTML DOM est construit comme un arbre d' Objets :
Avec le modèle objet, JavaScript obtient toute la puissance
dont il a besoin pour créer du HTML dynamique :
JavaScript peut modifier tous les éléments HTML de la page
JavaScript peut modifier tous les attributs HTML de la page
JavaScript peut changer tous les styles CSS de la page
JavaScript peut supprimer les éléments et attributs HTML existants
JavaScript peut ajouter de nouveaux éléments et attributs HTML
JavaScript peut réagir à tous les événements HTML existants dans la page
JavaScript peut créer de nouveaux événements HTML dans la page
En d'autres termes : le DOM HTML est une norme sur la façon
d'obtenir, de modifier, d'ajouter ou de supprimer des éléments
HTML
Accès aux éléments du DOM
L'objet document représente votre page Web. Si vous
souhaitez accéder à n'importe quel élément d'une page
HTML, vous commencez toujours par accéder à l'objet
document.
Exemples d'utilisation de l'objet document pour accéder et
manipuler HTML
getElementById
getElementByClassName
getElementByTagName
Exemple 1
getElementByTagName
Exemple 2
getElementByName
Accès aux DOM via sélecteur
querySelector
querySelectorAll
Propriété ClassName
La propriété className permet d’accéder, en écriture ou en
lecture, à l’attribut class un élément HTML. Si cet attribut n’existe
pas, Javascript le rajoute dynamiquement.
L’API CLASSLIST
Cet API (compatible qu’à partir d’Internet Explorer 10) permet
d’étendre les possibilités de manipulation des classes HTML.
connaitre le nombre de classes : [Link]
ajouter une valeur de classe : [Link](« uneClassCss »)
supprimer une valeur de classe : [Link](« uneClassCss »)
ajouter ou supprimer une valeur de classe existante : [Link](«
uneClassCss »)
retourner la chaîne complète d’une classe : [Link]()
Exemple :
Code html:
<button onclick="change()">click!</button>
<input type="button" value="remove" onclick="remove()">
Code css
.orange{background-color: orange;}
.border{border: solid red;}
Code javascript:
let obj = [Link]("button"); // cible la balise a
[Link] = "orange"; // rajoute la classe orange au paragraphe
[Link]("border"); // ajoute une autre valeur de classe sans supprimer 'orange'
function change(){
[Link]("border"); // ajoute ou supprime la classe}
function remove(){
[Link]("border"); // supprime la classe}
Propriété InnerHTML
Propriété textContent
HTML DOM Style
Exemple de propriétés prédéfinies :
Background
backgroundColor
borderColor
Color
flexDirection
fontFamily
Consultez : [Link]
Accès aux attributs
Pour interagir avec les attributs, l'objet Element nous
fournit deux méthodes
getAttribute() : permet de récupérer et d'éditer la
valeur de l’attribut donné en argument
setAttribute() : permet de modifier la valeur d’un
attribut connu par son nom qui est donné en
premier paramètre par la nouvelle valeur donnée
en deuxième argument
getattribute
setattribute
setAttribute et getAttribute
hasAttribute() et removeAttribute()
La méthode hasAttribute() permet de vérifier la présence d’un attribut :
renvoie true si c’est le cas et false dans le cas contraire.
Exemple:
<a href="[Link] la destination</a>
<script>
let obj = [Link]("a"); // cible la balise a
[Link]( "<br> Présence de href : "+ [Link]("href") ); // vérifie la
présence de href
</script>
La méthode removeAttribute() supprime un attribut.
Exemple:
<a href="[Link]
<br>
<a href="[Link] style="color:green">Tutovisuel</a>
<script>
let obj1 = [Link]("a")[0]; // cible la première balise a
let obj2 = [Link]("a")[1]; // cible la deuxième balise a
[Link]("style"); // supprime l'attribut style du deuxième lien
</script>
<head> = [Link]
Naviguer dans le DOM entre les
nœuds
On a vu précédemment comment accéder aux éléments HTML
Une fois que l'on a atteint un élément, il est possible de se déplacer de
façon un peu plus précise, avec toute une série de méthodes et de
propriétés que nous allons étudier ici.
Voici une image des liens qui permettent de voyager entre les nœuds DOM :
<html> = [Link]
<body> = [Link]
<head> = [Link]
Naviguer dans le DOM Accès
aux noeuds enfants
Exemple
<html>
<head>
<script>
alert( "From HEAD: " + [Link] ); // null, il n'y a pas encore de <body>
</script>
</head>
<body>
<script>
alert( "From BODY: " + [Link] ); // HTMLBodyElement maintenant existe
</script>
</body>
</html>
La propriété [Link] renvoie un tableau de tous les noeuds enfants
La propriété [Link] renvoie le premier noeud : equivalent à
[Link][0]
La propriété [Link] renvoie le dernier noeud :
La méthode [Link]() pour vérifier s’il y a des nœuds enfants.
renvoie true si au moins un enfant est trouvé.
Avant de récupérer les nœuds enfants, vous pouvez vérifier la présence
d’enfants avec la méthode hasChildNodes() à appliquer sur le parent
Naviguer dans le DOM Accès
aux noeuds enfants
Exemple :
<html>
<body>
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ul>
<script>
var obj = [Link]("ul");
[Link]("<p>Nombre d'enfant : "+ [Link]+"</p>");
</script>
</body>
</html>
Children: renvoie la collection des éléments enfants
Remarque : le script renvoie 7 enfants et non pas trois
En effet les espaces et les retours à la ligne à l’intérieur du parent
sont considérés comme des nœuds texte.
Heureusement, il existe une solution à ce problème ! Les attributs
firstElementChild, lastElementChild, nextElementSibling et
previousElementSibling ne retournent que des éléments HTML et
permettent donc d'ignorer les noeuds textuels
Naviguer dans le DOM Accès
aux noeuds parents
parentNode - Renvoie le noeud parent de l'élément
parentElement - Renvoie le noeud de l'élément parent de l'élément
Exemple1 :
<html>
<body>
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ul>
<script>
var obj = [Link]("li")[0];
[Link] = "solid red thin"; // élément parent de LI
</script>
</body>
</html>
Exemple12:
alert( [Link] ); // document
alert( [Link] ); // null
Naviguer dans le DOM Accès
aux noeuds frères
nextSibling - Renvoie le noeud frère qui est le prochain enfant de son parent
nextElementSibling - Renvoie l'élément frère qui est le prochain enfant de son
parent
previousSibling - Renvoie le noeud frère qui est un enfant précédent de son
parent
previousElementSibling - Renvoie l'élément frère qui est un enfant précédent de
son parent
Exemple :
<p>Un text <span>puis</span> <span>un autre</span></p>
<script>
var obj = [Link]("span")[0]; // cible le premier span
[Link] = "red"; // cible le deuxième noeud après
</script>
Dans l’exemple ci-dessous entre le premier SPAN et le deuxième, il y a un espace
(considéré comme un nœud), d’où l’utilisation du double nextSibling. Ou bien utiliser
[Link] qui cible le nœud element suivant
[Link] = "red";
Naviguer dans le DOM (Résumé)
Informations sur un nœud
Propriétés nodeType et nodeName
Il existe trois types de noeud :
• Le noeud élément qui fait référence à la balise HTML
• Le noeud attribut ou noeud associé qui fait référence à un attribut (comme
l’attribut class)
• Le noeud texte qui fait référence au contenu texte (attention, un espace
ou un retour à la ligne est considéré comme un noeud)
Proprieté nodeType retourne :
• Le valeur 1 pour un noeud élément
• Le valeur 2 pour un noeud attribut
• Le valeur 3 pour un noeud texte
Proprieté nodeName retourne le nom courant d’un nœud :
retourne, par exemple la chaine IMG pour la balise image
Exemple :
Code html:
Nom : <input type="text" id="nom" name="nom">
Code javascript:
let obj= [Link]("nom");
[Link]("<br> Information type du noeud : "+[Link]); // affiche le
type de noeud
[Link]("<br>Nom de l’element html : "+[Link]); // affiche le nom
du noeud
Récupérer la valeur d’un noeud
texte
La propriété nodeValue retourne la valeur d’un nœud texte
seulement. Un nœud texte est toujours enfant d’un nœud
élément
Exemple :
<p>Un text <span>puis</span> <span>un autre</span></p>
<script>
var obj = [Link]("p")[0]; // cible le premier span
[Link]("<div>"+[Link]+"</div>"); // cible le
premier noeud de la balise P
</script>
Récupérer tous les noeuds
d’attribut
La propriété attributes retourne dans l’ordre un tableau
d’attributs de l’élément HTML.
Exemple :
Code html:
Nom : <input type="text" id="nom" name="nom">
Code javascript:
let obj= [Link]("nom"); // cible la balise INPUT
[Link]("Valeur de l'attribut type : "+[Link][0].value); //
affiche le premier attribut
Créer et insérer des noeuds
(Ajouter des éléments HTML)
Pour créer des nœuds DOM, il existe deux méthodes :
[Link](tag) Crée un nouveau noeud élément avec la balise
donnée
[Link](text) : Crée un nouveau nœud texte avec le texte donné
Exemple1 :
let div = [Link]('div’);
let textNode = [Link]('Here I am’);
Exemple 2 :
// 1. Create <div> element
let div = [Link]('div');
// 2. Set its class to "alert"
[Link] = "alert";
// 3. Fill it with the content
[Link] = "<strong>Hi there!</strong> You've read an important
message.";
Créer et insérer des noeuds
(Ajouter des éléments HTML)
La méthode spéciale append permet d’insérer un élément en tant que dernier
enfant d’un élément parent.
Exemple1 :
<style>
.alert {
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c763d;
background-color: #dff0d8;
}
</style>
<script>
let div = [Link]('div');
[Link] = "alert";
[Link] = "<strong>Hi there!</strong> You've read an important
message.";
[Link](textNode)
[Link](div);
</script>
Créer et insérer des noeuds
(Ajouter des éléments HTML)
Exemple2 :
<p id="ct"></p>
<script>
let txt = [Link]("Contenu de mon paragraphe");
// création du contenu texte
let obj = [Link]("ct"); // on accéde à l'identifiant
présent sur la page
[Link](txt); // insertion du texte dans 'obj’
</script>
Créer et insérer des noeuds
(Ajouter des éléments HTML)
Voici plus de méthodes d’insertion, elles spécifient différents endroits où insérer :
[Link](nodes or strings) – insérer des nœuds ou texte au début de node,
[Link](nodes or strings) –- insérer des nœuds ou du texte avant node,
[Link](nodes or strings) –- insérer des nœuds ou du texte après node,
[Link](nodes or strings) –- remplace node avec les nœuds ou le texte donnés.
Exemple :
<ol id="ol">
<li>0</li>
<li>1</li>
<li>2</li>
</ol>
<script>
[Link]('before'); // insère la chaîne de caractères "before" avant <ol>
[Link]('after'); // insère la chaîne de caractères "after" après <ol>
let liFirst = [Link]('li');
[Link] = 'prepend';
[Link](liFirst); // insère liFirst au début de <ol>
let liLast = [Link]('li');
[Link] = 'append';
[Link](liLast); // insère liLast à la fin de <ol>
</script>
Supprimer des noeuds
Pour supprimer un nœud, il existe une méthode [Link]().
On peut supprimer un élément enfant d’un élément parent avec la
méthode ancienne removeChild() à appliquer au parent.
Exemple suite de 1
Function supprimer(){
[Link]()}/ / supprimer le nœud div créé
Exemple 2
Code html
<ul id="liste">
<li>un</li>
<li>deux</li>
<li>trois</li>
</ul>
Code javascript
let liste = [Link]("liste"); // accède au parent
[Link]([Link][3]); // supprime le quatrième noeud (le
retour à la ligne est un noeud)
Ou bien //[Link]([Link][1])
Ou bien// [Link][1].remove()
Les tableaux avec DOM
(propriétés spécifiques)
L’élément <table> supporte (en plus de ce qui
précède) ces propriétés :
[Link] – la collection d’éléments <tr> du
tableau.
<tr>:
[Link] – la collection de cellules <td> et <th> à
l’intérieur du <tr> donné.
[Link] – le numéro de <tr> dans le tableau
dans son ensemble (y compris toutes les lignes
du tableau).
<td> et <th> :
[Link] – le numéro de la cellule à
l’intérieur du <tr> qui l’entoure.
Les tableaux avec DOM
(propriétés spécifiques)
Exemple :
<table id="tableau">
<tr>
<td>one</td><td>two</td>
</tr>
<tr>
<td>three</td><td>four</td>
</tr>
</table>
<script>
// obtenir td avec "two" (première ligne, deuxième colonne)
let td = [Link][0].cells[1];
[Link] = "red"; // le mettre en valeur
</script>
Modifier un tableau avec
DOM
On peut ainsi changer le contenu de la cellule :
// obtenir td (première ligne, deuxième colonne)
let td = [Link][0].cells[1];
[Link] = "blabla";
Modifier l’attribut de cellules
Supposons qu’on veuille mettre cette cellule de la
1ère ligne en gras. Il faudra y ajouter un attribut
style :
[Link]("style", "font-weight:bold;");
Modifier un tableau avec
DOM
Créer le tableau
let table1 = [Link]("table");
Ajouter une nouvelle ligne
var derniere_ligne = [Link]("tr");
for (i=0;i<2;i++) {
var cell = [Link]("TD");
[Link]=texte;
derniere_ligne.append(cell);
}
[Link](derniere_ligne);
Document .[Link](table1)
Modifier un tableau avec DOM
Supprimer une ligne
var premiere_ligne = [Link][0];
premiere_ligne.remove()
Ou bien
//[Link](premiere_ligne);
Le code [Link](enfant) permet de
supprimer l’élément, ainsi que les éléments que celui-
ci contient.
Création DOMMenuObject
Syntaxe :
Var menuObject =[Link]("MENU");
Création DOMMenuObject
Création DOMMenuObject
JAVASCRIPT
6. Programmation événementielle
Accès aux éléments d’un
formulaire (Zones de texte )
<FORM NAME="Questions">
<INPUT TYPE="text" NAME=“txtClasse" VALUE="" SIZE="10">
</FORM>
Le texte entré par l'utilisateur est affecté à la propriété
value du composant txtClasse
Le contenu du champ de texte est accessible par son
nom complet :
[Link]
il peut être affecté à une variable MaClasse par
l'expression: MaClasse =
[Link]
Les formulaires dans un même document sont stockés
dans un tableau appelé forms; le premier formulaire est
alors noté forms[0], la deuxième est forms[1] etc..
Si Questions est situé en position de premier formulaire, on
peut remplacer l'affectation précédente par :
MaClasse = [Link][0].[Link]
Accès aux éléments d’un
formulaire(l'objet SELECT )
selectedIndex numéro de l'élément sélectionné
dans la liste
var num = [Link]
Var valeur = [Link] (l’élément sélectionné)
options[] est le tableau prédéfini contenant les
objets de la liste
[Link][num] est l'objet champ situé au N°
num (rappel : le 1er a le numéro 0)
[Link][num].value est la valeur de l'option
N° num de la liste.
[Link][num].text est le texte suivant le
champ <OPTION>.
Accès aux éléments d’un
formulaire (Boutons RADIO)
[Link][num] est le bouton radio N° num
(le 1er a le numéro 0) de l'ensemble de
boutons nommé choix
checked est le booléen décrivant l'état
d'un bouton : if ([Link][num].checked) ....
[Link][num].value est la valeur associée
au bouton N° num de la série de bouton.
Accès aux éléments d’un
formulaire Cases à cocher
Le traitement est complètement semblable au
cas des boutons radio, à la différence que
chaque case possède un nom propre distinct des
autres. L'état checked de chaque case doit
donc être testé individuellement.
Voir l'exemple complet qui suit.
Notion d’évènement
Notion d’évènement
Utiliser les attributs d’une balise html
Notion d’évènement
Utiliser les méthodes spéciales
Notion d’évènement(DOM)
Utiliser la propriété DOM(1)
Notion d’évènement (DOM)
Ajout de gestionnaire d'évènement(2)
La méthode permettant d'ajouter un écouteur
d'évènements est "addEventListener« dont le rôle sera
d'exécuter des instructions uniquement si l'évènement
se produit. Il s'utilise comme ceci :
Exemple :
// On sélectionne la 1ère section, par exemple
let section = [Link]("section")
// On ajoute un écouteur d'évènements qui surveillera le
clic et exécutera la fonction "fonction" quand il se
produira
[Link]("click", fonction)
function fonction(){
// Ce code A exécuter
Notion d’évènement (DOM)
Suppression
de gestionnaire d'évènement(2)
Utilisation d’Evénements
Utilisation d’Evénements
onChange : se produit quand un élément (Textarea, Text ou Select) est
modifié par l'utilisateur
Utilsation d’Evénements
Exemples
Utilsation d’Evénements
Exemples
Utilsation d’Evénements
Exemples
Utilsation d’Evénements
Exemples onload et onbeforeunload
Utilsation d’Evénements
Exemples
Utilsation d’Evénements
Exemples
Obtenir les coordonnées de
l’ecran (mousemove())
Evènements souris(mouseover,
mouseout,mouseenter, mouseleave)
L’événement onmouseover se produit lorsque le pointeur de la souris entre dans
l’élément div et ses éléments enfants (p et span).
L’événement onmouseout se produit lorsque le pointeur de la souris est déplacé
hors de l’élément div et lorsqu’il quitte ses éléments enfants (p et span).
L’événement onmousemove se produit chaque fois que le pointeur de la souris
est déplacé sur l’élément div.
L’événement mouseenter se produit uniquement lorsque le pointeur de la souris
entre dans l’élément div.
L’événement mouseleave se produit uniquement lorsque le pointeur de la souris
est déplacé hors de l’élément div.
Evènements souris(mouseover,
mouseout,mouseenter, mouseleave)
Exemple:
Evènements onchange(select,text)
Exécutez un code JavaScript lorsqu’un utilisateur modifie l’option
sélectionnée d’un élément <select> :0
Modifiez le texte dans le champ de saisie, puis cliquez en dehors du
champ pour déclencher l’événement onchange.
Exemple1
Evènements onchange(select,text)
Exemple2
Gestion évènement(clavier)
onkeypress onkeydown onkeyup
Soumission d’un formulaire
Interruption d’un formulaire
validation d’un formulaire
validation d’un formulaire
validation d’un formulaire
Découvrir JQUERY