La méthode la plus proche() en JavaScript est utilisée pour récupérer l'ancêtre ou le parent le plus proche de l'élément qui correspond aux sélecteurs. Si aucun ancêtre n’est trouvé, la méthode renvoie nul .
Cette méthode parcourt l'élément et ses parents dans l'arborescence du document, et le parcours se poursuit jusqu'à ce que le premier nœud correspondant à la chaîne de sélection fournie soit trouvé.
Syntaxe
targetElement.closest(selectors);
Dans la syntaxe ci-dessus, sélecteurs est une chaîne contenant un sélecteur (comme p: survol , etc.) utilisé pour trouver un nœud.
Comprenons cette méthode à l'aide de quelques illustrations.
Exemple 1
Dans cet exemple, il y a trois éléments div et un en-tête sur lesquels nous appliquons le le plus proche() méthode. Ici, les sélecteurs que nous utilisons sont les identifiant sélecteur, descendant sélecteur, enfant sélecteur, et :pas sélecteur.
This is the first div element. <h3 id="h"> This is a heading inside the div. </h3> This is the div inside the div element. This is the div element inside the second div element. var val1 = document.getElementById('div3'); var o1 = val1.closest('#div1'); var o2 = val1.closest('div div'); var o3 = val1.closest('div > div'); var o4 = val1.closest(':not(#div3)'); console.log(o1); console.log(o2); console.log(o3); console.log(o4);Testez-le maintenant
Sortir
Après l'exécution du code ci-dessus, le résultat sera -
Exemple2
Ceci est un autre exemple d'utilisation Javascript c'est le plus proche() méthode.
This is the div element. <p id="p1"> This is the paragraph element inside the div element. </p><h3 id="h"> This is the child of the paragraph element. <p id="p2"> This is the child of heading element of the paragraph element. </p> </h3> <p></p> var val1 = document.getElementById('p2'); var o1 = val1.closest('p'); var o2 = val1.closest('h3'); var o3 = val1.closest('div'); console.log(o1); console.log(o2); console.log(o3);Testez-le maintenant
Sortir
Après l'exécution du code ci-dessus, le résultat sera -
