JavaScript
LEÇON 4
Objectif du Cours
Comprendre l'importance des liens dans la navigation web, apprendre à créer des liens en HTML, distinguer entre les liens externes et internes, comprendre les liens ancres, maîtriser l'attribut href, et connaître les types de chemins (absolu et relatif).
Introduction au DOM
Qu'est-ce que le DOM ?
Le DOM, ou Document Object Model (Modèle d'Objet du Document), est une interface de programmation pour les documents HTML et XML. Il représente la page web de manière structurée sous forme d'un arbre d'objets que les langages de programmation, comme JavaScript, peuvent manipuler. Le DOM permet d'accéder, de modifier, de supprimer et d'ajouter des éléments à la structure d'un document.
Utilité du DOM
Le DOM est essentiel pour créer des pages web interactives et dynamiques. Il permet aux développeurs de :
- Accéder et modifier le contenu HTML et les attributs des éléments.
- Modifier la structure du document en ajoutant ou supprimant des éléments.
- Réagir aux événements déclenchés par les utilisateurs (clics, saisies de texte, etc.).
- Manipuler le style CSS pour changer l'apparence des éléments.
Spécifications du DOM
Le DOM est une norme définie par le W3C (World Wide Web Consortium). Les spécifications du DOM définissent l'API que les navigateurs doivent implémenter pour permettre l'interaction avec les documents. Les versions courantes incluent le DOM Level 1, Level 2 et Level 3, chacune apportant des améliorations et des fonctionnalités supplémentaires.
Structure du DOM
Le DOM représente un document HTML sous forme d'un arbre d'objets. Chaque élément HTML, attribut et texte est un objet du DOM, appelé "nœud".
Types de Nœuds
- Document : Représente le document entier.
- Element : Représente un élément HTML.
- Attribute : Représente un attribut d'un élément HTML.
- Text : Représente le contenu textuel d'un élément ou d'un attribut.
- Comment : Représente un commentaire dans le document.
- DocumentFragment : Représente une partie détachée du document.
Exemple de Structure du DOM
Considérons le document HTML suivant :
L'arbre DOM correspondant serait :
Accéder au DOM avec JavaScript
Sélection d'Éléments
JavaScript fournit plusieurs méthodes pour accéder aux éléments du DOM :
- getElementById : Sélectionne un élément par son identifiant.
- getElementsByClassName : Sélectionne des éléments par leur classe.
- getElementsByTagName : Sélectionne des éléments par leur nom de balise.
- querySelector : Sélectionne le premier élément correspondant à un sélecteur CSS.
- querySelectorAll : Sélectionne tous les éléments correspondant à un sélecteur CSS.
Manipulation du Contenu
Vous pouvez manipuler le contenu des éléments sélectionnés en utilisant les propriétés et méthodes du DOM.
Modifier le Texte
.png)
Modifier le HTML
.png)
Manipulation des Attributs
Accéder et Modifier les Attributs
Ajouter et Supprimer des Attributs
Manipulation de la Structure du DOM
Ajouter des Éléments
Insérer des Éléments
Supprimer des Éléments
Manipulation du Style
Vous pouvez manipuler les styles CSS des éléments via JavaScript en utilisant la propriété style.
Classes CSS
Vous pouvez ajouter, supprimer et basculer des classes CSS sur les éléments.
Exercices
Exercice 1 : Sélection et Modification
Sélectionnez l'élément avec l'ID "paragraphe" et changez son texte en "Texte modifié".
Exercice 2 : Ajout d'Élément
Ajoutez un nouveau paragraphe avec le texte "Nouveau paragraphe" à la fin du corps du document.
Exercice 3 : Manipulation des Attributs
Ajoutez un attribut title à l'élément avec l'ID "paragraphe" avec la valeur "Ceci est un paragraphe".
Exercice 4 : Manipulation du Style
Changez la couleur du texte de l'élément avec l'ID "paragraphe" en rouge.
Exercice 5 : Classes CSS
Ajoutez la classe "important" à l'élément avec l'ID "paragraphe".
En maîtrisant le DOM, vous serez en mesure de créer des pages web interactives et dynamiques. Le DOM offre une multitude de possibilités pour manipuler les éléments HTML, réagir aux actions de l'utilisateur et modifier l'apparence et le contenu de vos pages web en temps réel.
Cette leçon est terminée. Vous pouvez la trouver au format PDF ci-dessous. Merci.
JAVA LECON 2 (PDF)
Trouver des Exercices et des Tutorielles ICI
About BKOI SCHOOL
Qu'est-ce que BKOISCHOOL ?
Nous créons des expériences d'apprentissage simplifiées et interactives. L'apprentissage du développement web devrait être facile à comprendre et disponible pour tout le monde, partout ! BKOI SCHOOL est une école pour les développeurs web, couvrant tous les aspects du développement web :
BKOI SCHOOL a été créé en 2024 et tire son nom de la capitale du MALI BAMAKO (BKO).