HTML5 - DOM partie 1

Le SOLEIL qui fait référence à Modèle d'objet de documentCe n'est rien de plus qu'une représentation objet des éléments qui se trouvent dans notre document HTML, grâce à cela, nous pouvons établir une connexion plus profonde avec Javascript et obtenir des effets très intéressants; Cependant, pour arriver à ce niveau, il faut d'abord savoir très bien se débrouiller au sein du DOM pour sa mise en œuvre et son utilisation.
Comprendre le DOM
Élargir le concept de SOLEIL On peut aussi ajouter qu'il s'agit d'une collection d'objets qui représente le HTML Dans le document, dans son nom, nous voyons ce qu'est un modèle et le mot-clé qu'il représente est un modèle représentatif du document HTML.
Le DOM est un outil clé dans le développement WEB, puisqu'il nous fournit un pont entre la structure et le contenu entre nos documents HTML et Javascript.
Le modèle dont nous parlons est créé par le navigateur lorsqu'il interprète le code HTML, la structure de base d'un DOM peut être vue de la manière suivante dans un schéma dans l'image suivante :

Comme nous pouvons le voir, il est basé sur une structure hiérarchique, ce qui nous permet d'utiliser les chemins de ces relations pour obtenir des informations ou apporter des modifications structurelles via Javascript.
Tester le DOM
Nous allons effectuer quelques tests simples sur notre document afin de nous habituer à la façon dont vous pouvez travailler avec. SOLEIL, l'un des premiers tests que nous pouvons effectuer est de vérifier qu'une fonctionnalité est disponible dans le document, voyons dans le code suivant :

 Exemple
Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix. 

Ici, nous venons de faire quelque chose de simple, nous vérifions d'abord si la méthode existe querySelectorAll, si elle existe alors à une variable on affecte le contenu de tous les éléments img ils ont l'identifiant paratexte, comme nous effectuons un contrôle en cas d'échec, nous utilisons un moyen différent pour obtenir les mêmes données, dans ce cas c'est le getElementById et après getElementByTagNameEn fin de compte, simplement avec notre variable définie, nous parcourons son contenu et modifions leurs propriétés CSS.
Peut-être ici le point négatif que nous pouvons voir est que si nous avons de nombreuses vérifications, notre code peut devenir complexe et illisible, tout est une question de compromis entre ce que nous voulons réaliser et la manière de le réaliser, de cette manière nous pouvons obtenir notre résultats.
Dans la prochaine partie de ce didacticiel, nous examinerons quelques exemples plus avancés sur la façon de continuer à travailler avec le DOM.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif