JavaScript – pt.
2
JavaScript HTML DOM
LOG310-TECHNOLOGIE WEB 1
What is the HTML DOM?
Le DOM HTML est un modèle d'objet standard et une interface de
programmation pour HTML. Il définit:
• Les éléments HTML comme objets
• Les propriétés de tous les éléments HTML
• Les méthodes pour accéder à tous les éléments HTML
• Les événements pour tous les éléments HTML
En d'autres termes: le DOM HTML est une norme pour savoir
comment obtenir, modifier, ajouter ou supprimer des éléments
HTML.
LOG310-TECHNOLOGIE WEB 1
The HTML DOM (Document Object Model)
• Lorsqu'une page Web est chargée, le navigateur crée un
Document Object Model de la page.
• Le modèle HTML DOM est construit comme une arborescence
d'objets:
LOG310-TECHNOLOGIE WEB 1
The HTML DOM (Document Object Model)
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 d’une page.
• JavaScript peut modifier tous les attributs HTML d’une 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 de la
page.
• JavaScript peut créer de nouveaux événements HTML dans la
page.
LOG310-TECHNOLOGIE WEB 1
JavaScript - HTML DOM Methods
• Les méthodes HTML DOM sont des actions que vous pouvez effectuer (sur
des éléments HTML).
• Les propriétés HTML DOM sont des valeurs (d'éléments HTML) que vous
pouvez définir ou modifier.
• L'exemple suivant modifie le contenu (le innerHTML) de l'élément <p>
avec id = "demo":
LOG310-TECHNOLOGIE WEB 1
Finding HTML Elements
Pour manipuler votre page HTML les vous devez d'abord trouver les
éléments. Il y a plusieurs moyens de le faire:
• Recherche d'éléments HTML par identifiant
• Recherche d'éléments HTML par nom de balise
• Recherche d'éléments HTML par nom de classe
• Recherche d'éléments HTML à l'aide de sélecteurs CSS
• Recherche d'éléments HTML à l'aide de collections d'objets
HTML
LOG310-TECHNOLOGIE WEB 1
Finding HTML Element by Id
• Le moyen le plus simple de trouver un élément HTML dans le DOM est
d'utiliser l'ID d'élément.
• Cet exemple trouve l'élément avec id = "intro":
• Si l'élément est trouvé, la méthode retournera l'élément en tant qu'objet
(dans myElement), sinon myElement contiendra null
LOG310-TECHNOLOGIE WEB 1
Finding HTML Elements by Tag Name
• Cet exemple trouve tous les éléments <p>:
• Cet exemple trouve l'élément avec id = "main", puis trouve tous les
éléments <p> à l'intérieur de "main":
LOG310-TECHNOLOGIE WEB 1
Finding HTML Elements by Class Name
• Si vous voulez trouver tous les éléments HTML avec le même nom
de classe, utilisez getElementsByClassName ().
• Cet exemple renvoie une liste de tous les éléments avec class =
"intro"
LOG310-TECHNOLOGIE WEB 1
Finding HTML Elements by CSS Selectors
Pour trouver tous les éléments HTML qui correspondent à un sélecteur CSS
spécifié (id, noms de classe, types, attributs, valeurs d'attributs, etc.),
utilisez la méthode querySelectorAll ().
LOG310-TECHNOLOGIE WEB 1
Finding HTML Elements by HTML Object
Collections
• Cet exemple recherche l'élément de formulaire avec id = "frm1", dans
la collection de formulaires, et affiche toutes les valeurs d'élément:
LOG310-TECHNOLOGIE WEB 1
Changing HTML Content
• Le moyen le plus simple de modifier le contenu d'un élément HTML
consiste à utiliser la propriété innerHTML.
• Pour modifier le contenu d'un élément HTML, utilisez cette syntaxe:
• Cet exemple modifie le contenu d'un élément <p>:
LOG310-TECHNOLOGIE WEB 1
Changing the Value of an Attribute
• Pour modifier la valeur d'un attribut HTML, utilisez cette syntaxe:
• Cet exemple modifie la valeur de l'attribut src d'un élément <img>:
LOG310-TECHNOLOGIE WEB 1
Changing HTML Style
• Pour changer le style d'un élément HTML, utilisez cette syntaxe:
• L'exemple suivant modifie le style d'un élément <p>:
LOG310-TECHNOLOGIE WEB 1
Using Events
• Le DOM HTML vous permet d'exécuter du code lorsqu'un événement se
produit.
• Les événements sont générés par le navigateur lorsque "des choses se
passent" sur des éléments HTML:
• Un élément est cliqué
• La page s'est chargée
• Les champs de saisie sont modifiés
• Cet exemple modifie le style de l'élément HTML avec id = "id1", lorsque
l'utilisateur clique sur un bouton:
LOG310-TECHNOLOGIE WEB 1
Reacting to Events
• Un JavaScript peut être exécuté lorsqu'un événement se produit, comme
lorsqu'un utilisateur clique sur un élément HTML.
• Pour exécuter du code lorsqu'un utilisateur clique sur un élément, ajoutez
du code JavaScript à un attribut d'événement HTML:
• Exemples d'événements HTML:
• Lorsqu'un utilisateur clique sur la souris
• Lorsqu'une page Web est chargée
• Lorsqu'une image a été chargée
• Lorsque la souris se déplace sur un élément
• Lorsqu'un champ de saisie est modifié
• Lorsqu'un formulaire HTML est soumis
• Lorsqu'un utilisateur frappe une touche
LOG310-TECHNOLOGIE WEB 1
Reacting to Events
• Dans cet exemple, le contenu de l'élément <h1> est modifié lorsqu'un utilisateur clique
dessus:
LOG310-TECHNOLOGIE WEB 1
HTML Event Attributes
• Pour affecter des événements aux éléments HTML, vous pouvez utiliser des
attributs d'événement.
• Dans l'exemple suivant, une fonction nommée displayDate() sera exécutée
lorsque le bouton sera cliqué.
• La fonction est appelée Event Handler.
LOG310-TECHNOLOGIE WEB 1
Assign Events Using the HTML DOM
• Le DOM HTML vous permet d'attribuer des événements à des éléments HTML à
l'aide de JavaScript:
• Dans l'exemple ci-dessus, une fonction nommée displayDate() est affectée à
un élément HTML avec l'id = "myBtn".
• La fonction sera exécutée lorsque le bouton sera cliqué.
LOG310-TECHNOLOGIE WEB 1
The onload and onunload Events
• Les événements onload et onunload sont déclenchés lorsque l'utilisateur entre
ou quitte la page.
• L'événement onload peut être utilisé pour vérifier le type de navigateur et la
version du navigateur du visiteur, et charger la version appropriée de la page
Web en fonction des informations.
LOG310-TECHNOLOGIE WEB 1
The onchange Event
• L'événement onchange est souvent utilisé en combinaison avec la validation
des champs d'entrée.
• La fonction myFunction() sera appelée lorsqu'un utilisateur modifie le contenu
d'un champ de saisie.
LOG310-TECHNOLOGIE WEB 1
The onmouseover and onmouseout Events
• Les événements onmouseover et onmouseout peuvent être utilisés pour
déclencher une fonction lorsque l'utilisateur passe la souris sur ou hors
d'un élément HTML:
LOG310-TECHNOLOGIE WEB 1
The onmousedown, onmouseup and onclick
Events
• Les événements onmousedown, onmouseup et onclick font tous partie d'un clic de
souris.
• D'abord quand un bouton de souris est cliqué, l'événement onmousedown est
déclenché.
• lorsque le bouton de la souris est relâché, l'événement onmouseup est déclenché.
• lorsque le clic de souris est terminé, l'événement onclick est déclenché.
LOG310-TECHNOLOGIE WEB 1
The addEventListener() method
• La méthode addEventListener() attache un event handler à l'élément spécifié.
• La méthode addEventListener() attache un event handler à un élément sans
remplacer les event handler existants.
• Vous pouvez ajouter plusieurs event handler à un élément.
• Vous pouvez ajouter plusieurs event listener du même type à un élément, c'est-
à-dire deux événements "clic".
• Vous pouvez ajouter des event listener à n'importe quel objet DOM et pas
seulement aux éléments HTML. c'est-à-dire l'objet de window.
• Vous pouvez facilement supprimer un écouteur d'événements à l'aide de la
removeEventListener() méthode.
LOG310-TECHNOLOGIE WEB 1
Syntax
• Le premier paramètre est le type de l'événement (comme "click" ou
"mousedown" ou tout autre événement HTML DOM).
• Le deuxième paramètre est la fonction que nous voulons appeler lorsque
l'événement se produit.
• Le troisième paramètre est une valeur booléenne spécifiant s'il faut utiliser
le event bubbling ou le event capturing. Ce paramètre est facultatif.
LOG310-TECHNOLOGIE WEB 1
Add an Event Handler to an Element
• Alerte "Hello World!" lorsque l'utilisateur clique sur un élément:
LOG310-TECHNOLOGIE WEB 1
Add Many Event Handlers to the Same Element
• La méthode addEventListener () vous permet d'ajouter de nombreux
événements au même élément, sans écraser les événements existants:
• Vous pouvez ajouter des événements de différents types au même élément:
LOG310-TECHNOLOGIE WEB 1
Add an Event Handler to the window Object
• La méthode addEventListener () vous permet d'ajouter des event listener sur
n'importe quel objet HTML DOM tel que les éléments HTML, le document
HTML, l'objet window ou d'autres objets prenant en charge les événements,
comme l'objet xmlHttpRequest.
• Ajoutez un event listener qui se déclenche lorsqu'un utilisateur redimensionne
la fenêtre:
Event Bubbling or Event Capturing?
• Il existe deux façons de propager des événements dans le DOM HTML, le
bubbling et le capturing.
La propagation d'événement est un moyen de définir l'ordre des éléments
lorsqu'un événement se produit. Si vous avez un élément <p> dans un
élément <div> et que l'utilisateur clique sur l'élément <p>, quel événement
"click" de l'élément doit-il être géré en premier?
Lors du bubbling, l'événement de l'élément le plus interne est géré en premier,
puis celui de l'extérieur: l'événement click de l'élément <p> est géré en
premier, puis l'événement click de l'élément <div>.
Lors du capturing, l'événement de l'élément le plus extérieur est géré en
premier, puis celui de l'élément interne: l'événement click de l'élément <div>
sera traité en premier, puis l'événement click de l'élément <p>.
Avec la méthode addEventListener (), vous pouvez spécifier le type de
propagation en utilisant le paramètre "useCapture":
JavaScript Window - The Browser Object Model
• L'objet window est pris en charge par tous les navigateurs. Il représente la
fenêtre du navigateur.
• Tous les objets, fonctions et variables JavaScript globaux deviennent
automatiquement membres de l'objet window.
• Les variables globales sont les propriétés de l'objet window.
• Les fonctions globales sont des méthodes de l'objet window.
• Même l'objet document (du HTML DOM) est une propriété de l'objet window:
• est le même que:
Some Window Methods
• Quelques méthodes de l’objet Window:
• [Link] () - ouvre une nouvelle fenêtre
• [Link] () - ferme la fenêtre courante
• [Link] () - déplace la fenêtre courante
• [Link] () - redimensionne la fenêtre courante