Cas d'utilisation pratiques pour la méthode la plus proche de JavaScript ()

Fatigué des défis de traversée du nœud parent de JavaScript? Trouver le bon élément d'ancêtre peut être délicat, en particulier avec des structures HTML profondément imbriquées ou dynamiques. Explorons comment la méthode closest() simplifie ce processus.

Considérez cet extrait HTML:

<div data-id="123">
  Cliquez sur moi
</div>

L'obtention de l' data-id après un clic à bouton est simple à l'aide de parentNode :

 const Button = Document.QuerySelector ("Button");
Button.AdDeventListener ("Click", (EVT) => {
  console.log (evt.target.parentnode.dataset.id); // imprime "123"
});

Cependant, cette approche échoue avec une nidification plus complexe:

<div data-id="123">
  <div>
    <h1 id="Un-titre">Un titre</h1>
    <button>Cliquez sur moi</button>
  </div>
</div>

Chaîne parentNode plusieurs fois est lourde et incontournable. Solutions plus anciennes impliquées while les boucles:

 fonction getParentNode (el, tagname) {
  while (el && el.parentNode) {
    el = el.parentNode;
    if (el && el.tagname === tagname.touppercase ()) {
      Retour El;
    }
  }
  retourner null;
}

Bien que fonctionnel, cela est inflexible et ne gère pas les sélecteurs au-delà des noms de balises. JQuery's .closest() a offert une solution supérieure, mais l'ajout d'une bibliothèque pour une seule fonction est souvent exagéré.

Entrez Element.closest()

La méthode Element.closest() fournit une solution élégante:

 const Button = Document.QuerySelector ("Button");
console.log (Button.Closest ("div")); // retourne le<div> élément<p> <code>closest()</code> traverse le DOM vers le haut jusqu'à ce qu'il trouve un ancêtre correspondant au sélecteur fourni. Ce sélecteur peut être n'importe quel sélecteur CSS valide: id, classe, attribut ou nom de balise.</p>
<pre class="brush:php;toolbar:false"> element.closest ("# my-id"); // Travaux
element.closest (". My-Class"); // Travaux
element.closest ("[data-id]"); // Travaux

Si aucun ancêtre assorti n'est trouvé, closest() retourne null . Cela facilite les contrôles conditionnels:

 const Button = Document.QuerySelector ("Button");
if (Button.Closest (". My-Class")) {
  console.log ("Found!");
} autre {
  console.log ("Non trouvé!");
}

Applications du monde réel

1. Dispositions: détecter les clics à l'extérieur d'un menu déroulant pour le fermer:

 // ... (code de gestion des événements) ...
if (! evt.target.closest (". menu-dropdown")) {
  // ferme la liste déroulante
}

2. Tables: Récupérez les attributs de données à partir des lignes de table lors de l'interaction avec les boutons de ces lignes:

 fonction getUserId (cible) {
  return Target.Closest ("[Data-Userid]"). DataSet.Userid;
}

3. Tables de réaction: similaire à ce qui précède, mais dans un composant React:

 fonction handleclick (evt) {
  const userid = evt.currentTarget.closest ("[data-userid]"). dataSet.UserId;
  // ...
}

4. Modals: Fermez les modales lorsque vous cliquez en dehors du contenu modal:

 // ... (code de gestion des événements) ...
if (! evt.target.closest (". modal-inner")) {
  // Fermez le modal
}

Support de navigateur

Element.closest() bénéficie d'un excellent support de navigateur, à l'exclusion des anciennes versions d'Internet Explorer. Cela en fait un choix sûr et fiable pour la plupart des projets.

Element.closest() offre un moyen concis et efficace de naviguer dans la hiérarchie DOM, éliminant le besoin de boucles complexes ou de bibliothèques externes dans de nombreux scénarios communs. Sa polyvalence et son large support de navigateur en font un outil précieux pour tout développeur JavaScript.