Comprendre et Manipuler le DOM HTML avec JavaScript

Comprendre le DOM HTML et son utilisation
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Javascript
Revoir le teaser Je m'abonne
4,5
Transcription

49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
4,5
49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont :
1. Comprendre la structure hiérarchique du DOM HTML.
2. Savoir manipuler et modifier des éléments HTML avec JavaScript.
3. Utiliser des méthodes JavaScript pour sélectionner et interagir avec des éléments DOM.

Apprenez à manipuler le DOM HTML avec JavaScript pour interagir dynamiquement avec les éléments de votre page web.

Cette leçon offre une introduction détaillée au DOM HTML (Document Object Model) et à la manière dont il peut être manipulé via JavaScript. Les principaux objets du DOM, tels que Windows, Document, HTML, head, body, et les éléments div, img, a, sont expliqués en termes de leurs propriétés et méthodes. Divers types de nœuds sont abordés, y compris les nœuds éléments, texte, commentaire, et attributs.

Exemples pratiques montrent comment utiliser des méthodes telles que getElementsById, getElementsByTagName, et comment manipuler les styles CSS en temps réel via la console JavaScript d'un navigateur. La leçon inclut également des démonstrations de modification d'éléments sur des pages réelles, comme Twitter, pour illustrer la puissance et l'application pratique de ces techniques.

En totalité, cette leçon vise à fournir une compréhension claire et opérationnelle du DOM et des techniques de programmation nécessaires pour dynamiser les pages web modernes avec JavaScript.

Voir plus
Questions réponses
Qu'est-ce que le DOM HTML et pourquoi est-il important pour un développeur web ?
Le DOM HTML est une représentation arborescente de la page web qui permet à JavaScript de manipuler dynamiquement le contenu, la structure et le style des documents HTML.
Comment peut-on sélectionner un élément HTML par son identifiant en JavaScript ?
On peut utiliser la méthode `document.getElementById('id')` pour sélectionner un élément HTML par son identifiant.
Quelle est la différence entre les méthodes `getElementsByTagName` et `getElementsByClassName` ?
`getElementsByTagName` sélectionne les éléments par leur nom de balise HTML (comme 'div', 'p'), tandis que `getElementsByClassName` sélectionne les éléments par leurs noms de classe CSS.
Le DOM HTML est un ensemble d'objets normalisés par le W3C, des objets manipulables par le Javascript qui vont vous permettre de modifier tout ce qui apparaît dans la fenêtre de votre navigateur. Les objets forment une hiérarchie d'objets afin de correspondre à ce qui apparaît dans la fenêtre de votre navigateur. Prenons pour exemple une page toute simple avec juste une div, une image et un lien. Si je parcours la hiérarchie d'objets, j'ai d'abord ma fenêtre, c'est l'objet Windows. L'objet Windows a des propriétés, par exemple sa taille, mais aussi des méthodes. Nous en avons utilisé une, c'est Windows.Alert. La fenêtre contient un document. Le document c'est votre page, celle qui est chargée que celle que vous avez codée. Cet objet possède aussi des propriétés, comme par exemple une URL, mais aussi des méthodes que nous pourrons utiliser. Vient ensuite l'objet HTML, l'élément HTML que vous avez codé au début de votre document. Enfin un objet head, un objet body, un objet div et un objet img, suivi d'un lien. head, body, div, img, a, tous ces objets ont aussi des propriétés et des méthodes. Par exemple a a comme propriété href. Alors du point de vue du DOM, on n'utilise pas souvent le terme de propriété, mais plutôt le terme d'attribut, ce qui correspond à ce que vous codez quand vous codez un lien. Vous codez un attribut href, vous ne dites pas je code une propriété. Les objets qui sont ici hiérarchisés à l'écran sont du point de vue de DOM des nodes, des objets de type node, des nodes de type éléments, HTML, head, body, le reste ce sont des éléments, mais il y a d'autres types de nodes que nous allons voir. L'important ici c'est de bien comprendre que l'ensemble des objets forment une hiérarchie de nodes destinées à représenter et à agir sur ce que nous voyons dans la fenêtre de notre navigateur. Chaque type de noeud a des propriétés et des méthodes qui lui sont propres. Nous avons vu le noeud de type élément, il y a aussi des noeuds de type texte, par exemple texte qu'on spécifie dans un lien, mais aussi les espaces entre les éléments sont considérés du point de vue du node comme des noeuds de type texte. Nous avons aussi les noeuds de type commentaire, c'est les commentaires que vous ajoutez dans votre code HTML, il y a aussi les noeuds de type attribut, par exemple dans un lien href est un noeud attribut. Pour pouvoir manipuler les éléments de notre page HTML nous avons besoin de méthodes, de méthodes déjà pour les retrouver. Le DOM nous fournit ces méthodes. Nous avons par exemple getElémentsParadis qui permet de retrouver un élément à partir de son ID HTML. getElémentsByName permet de retrouver un élément par son nom, par l'attribut name. getElémentsByClassName renvoie un tableau contenant tous les éléments ayant pour la classe className. getElémentsByTypeName fait la même chose mais avec un tag, on lui spécifie un tag, par exemple si on veut tous les tags de type div, toutes les divs, on utilise getElémentsByTypeName div. Elements.children va nous renvoyer un tableau avec tous les éléments enfants de l'élément spécifié. Enfin Elements.childNode, au lieu de nous envoyer les éléments, va nous renvoyer tous les nodes enfants de l'élément spécifié. Voyons comment ça se passe à la console. Je vais charger dans mon navigateur le fichier test5.html que j'ai préalablement préparé. Fichier, ouvrir le fichier, le voici. J'ouvre la console de javascript, voilà, je clique sur éléments pour voir quelle tête il a, donc le body, une div avec header comme id, une div avec content comme id. Là j'ai bien mon ul d'idnav avec tous les lignes, ici mon image. Je vais récupérer l'ul, je vais dans la console et là je tape document.getElementsById nav, je récupère bien mon élément. Maintenant je vais changer sa couleur. Je vais mettre l'élément ul dans une variable par ul égale document.getElementsById nav. Je vérifie que j'ai bien l'élément dans ma variable. Je vais utiliser la propriété style, la propriété style contient toutes les propriétés css de l'élément. La propriété qui m'intéresse c'est background color et je vais lui spécifier une couleur, celle-ci par exemple. J'obtiens un beau violet. Je vais changer la taille de mon image. Pour la récupérer je vais utiliser getElementsByTagName. css ici, getElements, je vais le sélectionner là, ce sera plus simple. Et je mets le tag html img. Je récupère un tableau avec une seule entrée parce qu'il n'y a qu'une seule image dans mon document. Je vais mettre cet élément dans ma variable ul égale et ici je mets l'index 0, ce qui veut dire que je récupère la première entrée de mon tableau d'éléments. J'ai bien img dans ma variable ul. J'utilise la propriété style et la propriété height. Je vais lui spécifier 40px par exemple. Vous voyez, c'est magique. Je vais effacer la console, je vais récupérer à nouveau l'objet élément correspondant à mon ul, getElementsByIdNav. Maintenant je vais utiliser children, j'obtiens bien tous les éléments enfants de mon ul. Maintenant je vais récupérer tous les liens de mon document, j'obtiens un tableau avec tous mes éléments de type lien, il y en a trois. Je vais regarder l'attribut href de mon deuxième élément, je vais faire un truc comme ça, je vais tout chaîner, le deuxième élément c'est 1 et c'est l'attribut href. Voilà, j'obtiens la valeur de href. Est-ce que j'aurais quelque chose de différent si j'avais utilisé child node au lieu de children tout à l'heure ? On va essayer. Vous voyez j'ai d'autres choses, ici il y a bien mes élis, mais entre mes élis il doit y avoir des espaces, en fait ces espaces ne sont pas des espaces, c'est des retours chariots, c'est les retours chariots que j'ai placés à la fin de mes éléments html dans mon fichier. Là je peux voir toute la propriété de mon node de type texte. Maintenant allons nous amuser sous twitter. J'ouvre un autre onglet twitter.com, j'ouvre une console javascript. Maintenant je me propose de modifier ce titre. Pour ce faire je vais utiliser un petit outil bien pratique celui-ci. Je clique dessus, je parcours le document avec la souris, voilà c'est un h2. Je clique dessus et je me retrouve directement dans le code html de la page twitter sur l'élément h2. Par chance il y a un id, ça va être facile à retrouver. Je double clique pour faire un copier de l'id et je retourne dans la console. Je vais faire un document.getElementById l'id que j'ai récupéré et j'ai récupère bien mon élément h2. Je vais regarder le titre, pour ce faire je vais d'abord le mettre dans une variable, ce sera plus pratique, une variable title. Je l'ai bien là. Là je vais utiliser la propriété inner text, j'ai bien tweets dedans, je suis au bon endroit et je vais changer le texte, je vais mettre super c'est tweet. Maintenant celui-ci aussi j'aimerais bien le modifier. Je réutilise le même outil, voilà c'est un h3, je clique, je suis situé ici, il n'y a pas d'id, il me faut quelque chose de différenciant. Cette classe me paraît bien. Je la récupère, je retourne à la console, je fais un document, cette fois-ci getElementByClassName, je mets la classe et j'obtiens un tableau de deux éléments. C'est pas celui-ci qui m'intéresse mais celui-ci. Donc celui d'index 1, je vais le mettre dans ma variable title. Je vais plutôt faire comme ceci, title égale, là je mets un crochet pour récupérer le premier élément du tableau. J'ai bien celui-ci. Maintenant c'est le h3 qui m'intéresse, donc je fais title, getElement maintenant par tagName de h3 et j'obtiens bien ce qui m'intéresse. Je vais changer tout de suite le texte et je vais mettre un ne pas suivre. Je suis un peu d'esprit facétieux. ça ne marche pas, pourquoi ? Qu'est-ce que j'ai dans mon title ? J'ai bien ceci, je fais title, getElementByTagName, j'obtiens bien ceci. Ah oui c'est un tableau, effectivement, getElementByTagName m'envoie un tableau. Je récupère l'entrée, il n'y en a qu'une, c'est facile, c'est donc l'index 0 et maintenant je vais pouvoir faire une texte égale à ne pas suivre. Un seul point d'exclamation ça suffira. Voilà, ça a été modifié. Je peux changer l'image ici, là j'ai un petit message qui vient d'une extension, j'ignore. Je vais utiliser ce petit outil encore magique. Voilà je suis ici, comment le récupérer ? Je peux le récupérer, peut-être pas sa classe, on va essayer. Je retourne dans la console, document.getElementByClassName il y en a deux, je vais prendre qu'une seule, là je suis tombé dessus. Plutôt que de le modifier, je vais le supprimer. Pour ce faire, je vais utiliser la méthode remove. Voilà, c'est supprimé. Comme vous le constatez, javascript peut être très intrusif. Je vais vous montrer une des particularités de l'objet Windows. Ses méthodes et ses propriétés sont accessibles sans qu'il ait besoin de les préfixer par Windows. Par exemple, si j'ai Windows.alert, je peux également utiliser alert. Voyez, il m'est proposé. Pourquoi ? C'est aussi sans doute pour simplifier un peu les syntaxes, mais c'est aussi parce que Windows étant l'objet de plus haut niveau, il n'y a pas d'ambiguïté.

Programme détaillé de la formation

4 commentaires
4,5
4 votes
5
4
3
2
1
nicolas.braud
Il y a 1 year
Commentaire
Très bonne formation ; j'ai eu des difficultés avec la partie AJAX pour installer les hôtes virtuels d'un point de vue technique, mais on peut y arriver quand même à l'aide de tuto. les documents présentés en slide seraient appréciés pour les utiliser a posteriorir.
fguibert47
Il y a 2 years
Commentaire
Bonjour, Excellente formation. Très bien faite. Alain Beauvois est un très bon professeur !! Elle correspond tout à fait à ce que j'attendais. Merci.
amercadie
Il y a 2 years
Commentaire
Excellente formation. Des cours progressifs et très clairs.
david.coilot
Il y a 2 years
Commentaire
très bonne formation !!
Nos dernières formations JavaScript
  • Apprendre Vue JS 3
    Découvrir
    Apprenez à créer des applications web modernes avec notre formation "Apprendre Vue JS 3". Rejoignez-nous et maîtrisez ce puissant framework JavaScript ! 🚀 #VueJS #FormationWeb #Développement
    11h47 91 leçons
  • Apprendre JavaScript ES6 - Les fondamentaux
    Découvrir
    Apprendre les fondamentaux du langage de programmation JavaScript
    4h22 41 leçons 3,50 / 5
  • Savoir programmer en Node.js
    Découvrir
    Apprendre à programmer en Node.js
    2h14 15 leçons