Manipulation du DOM avec jQuery

arbre DOMLe arbre DOM est l'organisation hiérarchique du contenu de notre document HTMLCeci est très utile pour identifier les différents éléments contenus dans ledit document, car avec des identifiants uniques, nous pouvons attribuer des noms différents à des structures qui, malgré des étiquettes similaires, ont un objectif différent.
Le problème dans le passé était qu'il n'était pas possible de traverser facilement le arbre DOM en temps réel, car des routines et des fonctions lourdes devaient être créées dans Javascript, mais tout cela a changé avec l'apparition de jQuery. Ce cadre a permis de fournir une approche à l'utilisation de Javascript pour les non-spécialistes, cela fit à nouveau monter en flèche sa popularité.
Une des choses les plus intéressantes qui peut sembler très compliquée à faire, est de sélectionner le les enfants d'un élémentComme on parle d'une structure hiérarchique, on peut parler d'une famille, où le père est l'élément le plus élevé et ses enfants sont des éléments qui sont gouvernés sous son manteau ou sa protection.
Disons par exemple que nous avons une liste ou un élément non ordonné , il est logique de penser que leurs enfants sont les éléments qu'il peut contenir, si l'on veut sélectionner un élément Une liste particulière peut sembler une tâche très complexe, mais avec jQuery nous pouvons le réaliser d'une manière très simple et propre.
MéthodesPour cela, il suffit de donner un identifiant unique à notre élément parent puis d'appeler la méthode sur son sélecteur enfants (), avec cela nous obtiendrons la position sur laquelle nous pouvons aller avec la méthode chaque () chacun de ses enfants.
Voyons dans le code suivant un petit exemple de ce dont nous parlons :

 Manipulation du DOM avec JQuery

Fils 1
Fils 2
Fils 3

Tester 

Tout d'abord, nous commençons par inclure jQuery de CDN officiel, avec cela nous n'avons pas besoin de stocker le fichier avec le code source sur notre ordinateur, donc avec un navigateur et une connexion à l'Internet nous pouvons utiliser cet exemple.
Ensuite, nous créons un petit script où nous indiquons que lorsque vous cliquez sur l'élément avec l'id Début le code à l'intérieur est exécuté.
Le code à exécuter exprime simplement que l'élément avec l'id doit être recherché papa et à ce sélecteur on applique la méthode enfants () pour localiser ses enfants et enfin avec la méthode chaque () Nous parcourons chacun d'eux, dans le cas du code il y en a trois qui nous permettront de faire le voyage et cela devrait nous montrer le texte que chacun contient. Voyons comment fonctionne le code ci-dessus dans notre navigateur :

Après avoir cliqué sur le bouton tester on voit le premier Alerte:

AGRANDIR

Si nous continuons à fermer les alertes, nous verrons tous les éléments enfants contenus dans la structure hiérarchique :

AGRANDIR

Comme nous avons pu le voir, la manipulation des éléments dans la structure de notre page n'est pas compliquée du tout, ce n'est qu'un petit exemple qui nous donne la bouche ouverte sur ce que nous allons continuer à voir dans ce tutoriel.
Bien que la recherche d'éléments enfants soit très utile, il existe une méthode qui nous permet de faire une recherche plus directe à travers le aller, vagues cours. On se réfère à la méthode trouver (), cette méthode trouvera toutes les correspondances des éléments enfants du sélecteur qui l'invoque.
Avec cela, nous pouvons avoir un grand et appelez un trouver () dessus pour localiser les classes ou les identifiants en particulier, avec lesquels nous arrivons au point suivant.
Injecter des stylesUne fois que nous avons trouvé l'article désiré dans le SOLEIL, plusieurs fois nous ne voulons pas imprimer son contenu si nous ne le mettons pas en évidence d'une manière ou d'une autre, une manière intéressante consiste à ajouter un style audit élément, cela nous permettra de manipuler le CSS de notre page indirectement et pouvoir y mettre en évidence des éléments importants et ainsi nous pouvons voir quelque chose de plus dynamique dans notre document HTML.
Voyons dans le code suivant comment nous allons implémenter l'utilisation de la méthode trouver () et puis le injection de style sur les éléments trouvés, de cette façon nous pouvons nous rapprocher de quelque chose que nous pouvons donner utile dans la vie réelle :

 Manipulation du DOM avec JQuery

Fils 1
Fils 2
Fils 3

Tester 

Dans ce code si on regarde on a quelque chose de très similaire à l'astuce précédente, ce qu'on a changé c'est qu'en premier lieu le contenu de l'étiquette ici au lieu de parcourir les enfants d'un élément, on utilise la méthode trouver () localiser un élément avec la classe point culminant et à cet élément avec la méthode css () Nous allons y injecter des styles, dans ce cas nous le définirons comme couleur de fond rouge.
Voyons à quoi cela ressemble dans notre navigateur une fois que nous avons cliqué sur le bouton tester:

Tout comme nous avons pu localiser un enfant d'un élément, nous pouvons obtenir l'effet dans le sens inverse de la hiérarchie, c'est-à-dire à partir d'un fils, nous pouvons localiser le père. Ceci est très utile dans les longues listes générées dynamiquement, car nous pouvons ainsi mettre en évidence ou utiliser les parents en fonction de nos besoins.
Méthode des parents ()Pour cela nous avons la méthode Parents () que d'une manière similaire à enfants () localise le parent du sélecteur invoqué. Si on y ajoute la méthode each(), on ramènera tout l'héritage de l'élément, par exemple s'il s'agit d'un nous apporterons l'élément et si nous montons plus haut dans la hiérarchie jusqu'à l'élément et ainsi de suite jusqu'à ce que nous atteignions l'élément puisque par hiérarchie tous sont des parents par la façon dont ils sont contenus.
Voyons dans le code suivant comment faire un script avec jQuery qui nous permet d'atteindre cet objectif de montrer à tous les parents de notre élément choisi :

 Manipulation du DOM avec JQuery

Fils 1
Fils 2
Fils 3

Tester 

La structure est très similaire aux exemples précédents, cependant ici nous faisons un changement, cette fois nous utilisons la classe point culminant comme sélecteur et nous appliquons la méthode Parents () et ensuite avec un each() on peut parcourir la hiérarchie de l'intérieur vers l'extérieur.
Voyons à quoi ressemble le code ci-dessus lorsque nous l'exécutons dans notre navigateur :

AGRANDIR

Comme l'exemple précédent tant que nous continuons à fermer le Alertes nous verrons tous les parents de l'élément jusqu'à ce que nous arrivions à HTML.
L'astuce précédente nous aide à établir l'arbre généalogique d'un élément, peut-être qu'elle nous aidera à déboguer notre HTML, mais que se passe-t-il si nous voulons obtenir un parent spécifique, par exemple si nous avons plusieurs listes mais que nous voulons que le parent d'un particulier soit mis en évidence.
Il ne faut pas s'inquiéter, pour ce cas nous avons la méthode parentsJusqu'à (), avec cela, nous pouvons spécifier un point d'arrivée et nous pouvons faire un Injection HTML Pour mettre en évidence l'ensemble du bloc, voyons le code suivant où nous avons appliqué ces connaissances :

 Manipulation du DOM avec JQuery

Fils 1
Fils 2
Fils 3

Tester 

Si nous remarquons que ce code est une légère variation du précédent, le principal changement se produit dans l'appel à la méthode que nous venons d'expliquer parentsJusqu'à () auquel nous sommes passés div, c'est là que la recherche des éléments parents du sélecteur que nous affectons s'arrêtera.
Pour montrer que tout fonctionne, nous avons injecté un peu HTML Pour colorer la section marquée en rouge, voyons à quoi cela ressemble dans notre navigateur lorsque nous cliquons sur tester:

Nous voyons alors que seule la section avec le div est celle colorée en rouge, montrant ainsi que nous avons arrêté la recherche du parent dans l'élément spécifique, même en ayant un parent direct tel que l'élément qui nous montre la puissance de la recherche à travers arbre DOM.
Avec cela, nous avons terminé notre tutoriel, c'est juste une petite démonstration de toute la puissance de jQuery pour manipuler le SOLEIL de notre HTML, l'important est que nous devons beaucoup pratiquer et très bien lire la documentation car avec elle, nous pourrons obtenir des connaissances et des ressources supplémentaires pour pouvoir augmenter notre niveau de développement.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif