aleksander-onysiak / js-td-web-1-dom

Une introduction au DOM (Document Object Model) en Javascript

Javascript - cours 7

JavaScript - Créer des pages Web interactives, 1re partie : le DOM

Dominer le DOM (« Document Objetct Model »)

TABLE DES MATIÈRES

1. Découvrir le DOM

• Introduction au DOM
• Structure d'une page web
• Premiers pas avec le DOM en JavaScript

2. Parcourir le DOM

• La page web d'exemple
• Sélectionner des éléments
  • Les limites du parcours du DOM nœud par nœud
  • Sélection d'éléments selon leur balise
  • Sélection d'éléments selon leur classe
  • Sélection d'un élément selon son identifiant
  • Sélection d'éléments à partir d'un sélecteur CSS
  • Choix de la méthode de sélection
• Obtenir des informations sur les éléments
  • Le contenu HTML
  • Le contenu textuel
  • Les attributs
  • Les classes

3. Modifier la structure de la page

• La page web d'exemple
• Modifier un élément existant
• Ajouter un nouvel élément
  • Création du nouvel élément ;
  • Définition des informations de l'élément ;
  • Insertion du nouvel élément dans le DOM
• Variantes pour ajouter un élément
• Remplacer ou supprimer un noeud
  • Remplacer un noeud existant ;
  • Supprimer un noeud existant ;
• Manipulation du DOM et performances

4. Donner du style aux éléments

• La page web d'exemple
• Modifier le style d'un élément
  • La propriété style
  • Les propriétés CSS composées
• Accéder au style d'un élément
  • Les limites de la propriété style
  • La fonction getComputedStyle

5. DOM- POO - Synthèse

VIDÉOS

• 022 (…) Arrays.mp4 : Les instructions if / else
• 023 (…) 023 Coding Challenge 3.mp4 : La logique boléenne

PRÉPAS

• Prépa 1 : Enfant
• Prépa 2 : Rêve
• Prépa 3 : Instruments
• Prépa 4 : Langages
• Prépa 5 : Journaux
• Prépa 6 : Tutos
• Prépa 7 : Dictionnaire
• Prépa 8 : Couleurs
• Prépa 9 : Infos

Sources et ressources

Sources principales

• Vidéos et exercices (en anglais) : The Complete JavaScript Course 2019: Build Real Projects! sur Udemy par Jonas Schmedtmann (2019, 28h), sur Udemy (Udemy is an online learning and teaching marketplace with over 100000 courses and 24 million students) ;
• Notes écrites (en français) : Créez des pages web interactives avec JavaScript - sur OPENCLASSROOMS, tutoriel d'OPENCLASSROOMS (en français, 20 heures, facile) consacré à l'uilisation de JavaScript pour dynamiser les pages Web.

=> Pour ce cours en particulier : Créez des pages web interactives avec JavaScript - Partie 1 - Dominez le DOM sur OPENCLASSROOMS, partie 1 du tutoriel d'OPENCLASSROOMS (en français, 20 heures, facile) consacrée au DOM

Ressources

• La référence JavaScript par le MDN ;
• La Référence du DOM par le MDN ;
• La Référence des propriétés CSS par le MDN ;
• L'objet Document sur javascript.info ;
• You might not need jQuery ;
• Matériel du cours d'Openclassrooms sur gitHub
• Matériel du cours Udemy sur gitHub ;
• Page de ressources de Jonas ;
• Page de présentation de Jonas Schmedtmann sur Udemy ;