Techniques efficaces de parcours du DOM
Maîtrisez des méthodes comme .closest(), .siblings(), .find() et .parentsUntil() pour parcourir efficacement l’arbre DOM et éviter les goulots d’étranglement de performance.
Techniques efficaces de parcours du DOM est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.
Parcourir l'arbre DOM
Bienvenue ! Dans cette leçon, vous allez maîtriser des techniques efficaces pour parcourir le Document Object Model (DOM).
Le DOM ressemble à un arbre généalogique des éléments de votre page web. Comprendre comment le parcourir vous permet de sélectionner précisément des éléments, même sans identifiants ni classes directs.
- Parcourir : se déplacer ou cheminer à travers.
- DOM : représentation interne de votre structure HTML par le navigateur.
Rechercher des descendants avec .find()
La méthode .find() est idéale pour localiser des éléments descendants. Elle recherche *à l'intérieur* des éléments actuellement sélectionnés toutes les correspondances.
Imaginez que vous cherchiez des objets précis dans une boîte donnée. Cette méthode est très efficace pour restreindre votre recherche.
- Syntaxe :
$(selector).find(filterSelector) - Renvoie : un nouvel objet jQuery contenant les descendants trouvés.
.find() en action
Recherchons tous les éléments de liste (<li>) à l'intérieur d'une liste non ordonnée (<ul>) précise.
Exécutez le code pour voir quels éléments reçoivent un arrière-plan vert !
<div id="container">
<ul id="myList">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<p>Some other text</p>
<ul id="anotherList">
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all <li> elements within #myList
$('#myList').find('li').css('background-color', 'lightgreen');
// You can also chain with specific selectors
$('#myList').find('.active').css('font-weight', 'bold');
});
</script>Remonter avec .closest()
Vous devez parfois trouver un ancêtre (un parent, un grand-parent, etc.) d'un élément. C'est exactement ce que fait la méthode .closest().
Elle part de l'élément actuel et remonte *dans* l'arbre DOM en renvoyant le *premier* ancêtre correspondant au sélecteur fourni.
- Syntaxe :
$(selector).closest(filterSelector) - Renvoie : un objet jQuery contenant l'unique ancêtre le plus proche.
.closest() en action
Imaginez que vous cliquiez sur un bouton profondément imbriqué dans une structure. Vous souhaitez trouver son conteneur principal. .closest() est parfaitement adapté.
Cliquez sur le bouton ci-dessous pour mettre en évidence son ancêtre <div> le plus proche.
<div class="grandparent">
<div class="parent">
<p>Some text here</p>
<button id="myButton">Click Me</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
// Find the closest ancestor div and add a border
$(this).closest('div').css('border', '2px solid blue');
});
});
</script>Explorer les frères avec .siblings()
Les éléments situés au même niveau dans l'arbre DOM sont appelés des « frères ». La méthode .siblings() vous aide à tous les sélectionner.
Elle trouve tous les éléments qui partagent le même parent que l'élément actuel, *à l'exclusion* de cet élément.
- Syntaxe :
$(selector).siblings(filterSelector) - Renvoie : un nouvel objet jQuery contenant tous les éléments frères.
.siblings() en action
Mettons en évidence tous les frères d'un élément de liste précis lorsque vous cliquez dessus. Cette méthode est utile pour les listes ou les menus interactifs.
Cliquez sur n'importe quel élément de la liste pour voir ses frères changer de couleur !
<ul id="menu">
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#menu li').on('click', function() {
// Remove highlight from previously selected siblings
$('#menu li').css('background-color', '');
// Highlight the clicked item's siblings
$(this).siblings().css('background-color', 'lightyellow');
// Highlight the clicked item itself (optional)
$(this).css('background-color', 'lightblue');
});
});
</script>Remonter avec .parentsUntil()
Que faire si vous souhaitez sélectionner *plusieurs* ancêtres, mais vous arrêter à un endroit précis ? C'est là que .parentsUntil() devient utile.
Cette méthode remonte dans l'arbre DOM en sélectionnant tous les ancêtres de l'élément actuel, *jusqu'à* atteindre un élément indiqué par le sélecteur. L'élément d'arrêt lui-même n'est pas inclus.
- Syntaxe :
$(selector).parentsUntil(stopSelector, filterSelector) - Renvoie : un objet jQuery contenant les ancêtres sélectionnés.
.parentsUntil() en action
Nous avons une structure profondément imbriquée. Sélectionnons tous les éléments parents d'un <span> jusqu'à atteindre un <div class="container"> précis.
Exécutez cet exemple pour voir quels éléments reçoivent une bordure, mais remarquez que le div 'container' lui-même est ignoré !
<div class="body-wrapper">
<div class="container">
<div class="row">
<section>
<article>
<p>Hello <span>World!</span></p>
</article>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all parents of 'span' until the '.container' div
$('span').parentsUntil('.container').css('border', '1px dashed orange');
});
</script>Vérification rapide
Vous avez un élément <img> imbriqué dans un élément <div class="gallery-item">, lui-même situé dans un élément <div class="gallery-row">. Si vous sélectionnez l'élément <img>, quelle méthode jQuery utiliseriez-vous pour obtenir *uniquement* l'élément <div class="gallery-item"> ?
Récapitulatif : parcourir efficacement le DOM
Excellent travail ! Vous maîtrisez désormais les principales méthodes jQuery pour parcourir efficacement le DOM :
.find(): recherche *à l'intérieur* des éléments pour trouver leurs descendants..closest(): trouve l'*ancêtre le plus proche* correspondant à un sélecteur en remontant dans l'arbre..siblings(): sélectionne tous les éléments situés au *même niveau* que l'élément actuel, à l'exclusion de celui-ci..parentsUntil(): sélectionne plusieurs ancêtres *jusqu'à* un élément d'arrêt indiqué, sans l'inclure.
Utiliser judicieusement ces méthodes vous aide à écrire du code jQuery plus précis, plus performant et plus lisible pour les applications web dynamiques !
Questions Fréquemment Posées
La leçon « Techniques efficaces de parcours du DOM » est-elle gratuite ?
Oui — le texte complet de « Techniques efficaces de parcours du DOM » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Techniques efficaces de parcours du DOM » ?
Maîtrisez des méthodes comme .closest(), .siblings(), .find() et .parentsUntil() pour parcourir efficacement l’arbre DOM et éviter les goulots d’étranglement de performance. Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer jQuery Academy ?
Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.
Combien de temps prend la leçon « Techniques efficaces de parcours du DOM » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?
Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Sélecteurs d’attributs avancés
- Pseudo-classes et sélecteurs personnalisés
- Techniques efficaces de parcours du DOM