JavaScript est un langage de script puissant qui permet aux programmeurs de créer des sites Web dynamiques et interactifs. La recherche de l'élément parent d'un élément spécifique est une opération fréquente lorsque l'on travaille avec le modèle objet de document (DOM).
Ici, nous examinerons diverses approches basées sur JavaScript pour y parvenir.
L'élément parent d'un élément HTML peut être trouvé en utilisant l'attribut parentNode, qui est la méthode la plus simple. Lorsqu'un élément est fourni, cet attribut renvoie le nœud parent de l'élément dans l'arborescence DOM. L'utilisation de cet attribut est illustrée par l'exemple suivant :
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
La méthode getElementById est utilisée dans l'extrait de code ci-dessus pour choisir d'abord l'élément enfant par ID. Après cela, nous utilisons l'attribut parentNode pour attribuer l'élément parent à la variable parentElement.
Utilisation de la propriété parentElement : Le DOM propose une propriété parentElement utile qui peut être utilisée pour obtenir l'élément parent d'un élément HTML en plus de la propriété parentNode. L'application est très similaire à la technique précédente :
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Avec une méthode plus illustrative et plus compréhensible, nous pouvons obtenir le même résultat en utilisant l'attribut parentElement.
Utilisation de la méthode la plus proche() : La méthode close() est un autre outil efficace proposé par les navigateurs contemporains.
Grâce à cette technique, vous pouvez déterminer quel élément de l'arborescence d'un sélecteur CSS est l'ancêtre direct d'un élément. L’utilisation de la technique la plus proche() est illustrée dans l’exemple suivant :
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
La fonction close() est ensuite appelée dans le code ci-dessus, fournissant un sélecteur CSS comme argument, après que la méthode getElementById a été utilisée pour sélectionner l'élément enfant. Le premier ancêtre de l'élément qui correspond à la sélection spécifiée est renvoyé par la fonction close().
commandes Kali Linux
Dans ce cas, l'élément avec la classe « classe-parent » qui est l'ancêtre le plus proche de l'élément enfant est ce que nous essayons de trouver.
Utilisation des méthodes de traversée : Vous pouvez parcourir l'arborescence DOM en utilisant l'une des nombreuses méthodes de traversée proposées par JavaScript. Les méthodes parentNode, previousSibling, nextSibling, firstChild et lastChild en font partie. Vous pouvez accéder à l'élément parent d'un élément particulier en combinant ces techniques. À titre d’illustration, considérons ce qui suit
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
Dans cette ligne de code, nous utilisons d'abord getElementById pour choisir l'élément enfant, puis nous utilisons la propriété parentNode pour obtenir son élément parent. Ces techniques de parcours vous permettent de naviguer de haut en bas dans l'arborescence DOM pour localiser l'élément parent ou enfant requis.
Utilisation de la propriété parentElement pour la gestion des événements : Lors de l'utilisation de gestionnaires d'événements JavaScript, il peut être nécessaire d'avoir accès à l'élément parent de la cible de l'événement. L'attribut parentElement dans le gestionnaire d'événements peut être utilisé, par exemple, si vous disposez d'une liste de boutons et que vous souhaitez effectuer une action lorsqu'un bouton est cliqué sur l'élément parent.
Voici une illustration :
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); À l'aide de querySelectorAll, nous choisissons tous les composants de l'exemple de code ci-dessus qui ont la classe « bouton ». Ensuite, chaque bouton est doté d'un écouteur d'événement de clic attaché à l'aide de la fonction forEach.
SDLC
Nous utilisons event.target.parentElement pour accéder à l'élément parent à l'intérieur du gestionnaire d'événements. De ce fait, lorsque l’on clique sur le bouton, nous sommes en mesure d’agir sur l’élément parent.
Utilisation de la propriété d'élément parent avec des éléments dynamiques :
Vous pouvez vous retrouver dans des circonstances où vous devez accéder à l'élément parent d'un élément nouvellement formé si vous travaillez avec des éléments générés dynamiquement dans votre application Web.
Après avoir ajouté l'élément au DOM, vous pouvez utiliser la propriété Element parent dans certaines circonstances.
À titre d’illustration, considérons ce qui suit :
const parentElement = document.getElementById('parent-element'); function createNewElement() { const newElement = document.createElement('div'); // Manipulate the new element parentElement.appendChild(newElement); const newElementParent = newElement.parentElement; // Access the parent element of the newly created element } Dans cette ligne de code, nous utilisons d'abord getElementById pour choisir l'élément parent. Ensuite, en utilisant la fonction appendChild à l'intérieur de la fonction createNewElement, nous créons un nouvel élément, le modifions si nécessaire et l'ajoutons à l'élément parent.
En utilisant la propriété parentElement, nous pouvons obtenir l'élément parent du nouvel élément après l'avoir ajouté au DOM.
Utilisation de la propriété offsetParent :
Dans certaines circonstances, vous souhaiterez peut-être rechercher l’élément qui est l’ancêtre le plus proche d’un élément particulier. Vous pouvez accomplir cela en utilisant la propriété offsetParent. L'élément ancêtre le plus proche avec une position autre que statique, qui est le positionnement par défaut, est renvoyé.
Voici une illustration :
quel âge a Kylie Jenner
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
Dans l'extrait de code susmentionné, nous utilisons d'abord la méthode getElementById pour choisir l'élément enfant, puis l'attribut offsetParent est utilisé pour désigner l'élément ancêtre positionné le plus proche de la variable nommée positionAncestor.
Utilisation de la propriété parentNode avec différents types de nœuds :
Vous pouvez naviguer dans l'arborescence DOM et accéder au parent de plusieurs types de nœuds, tels que les nœuds de texte et les nœuds de commentaires, en plus d'accéder à l'élément parent d'un élément HTML.
Vous pouvez naviguer plus facilement dans l'arborescence DOM en utilisant la propriété parentNode, qui fonctionne avec différents types de nœuds. À titre d’illustration, considérons ce qui suit :
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
Dans cet exemple, nous utilisons la fonction createTextNode pour produire un nœud de texte. La propriété parentNode est ensuite utilisée pour récupérer l'élément parent. Lorsqu'il s'agit de structures DOM complexes contenant une variété de nœuds, cette stratégie peut être utile.
Utilisation de la propriété parentElement avec le Shadow DOM :
Vous devrez peut-être accéder à l'élément parent à l'intérieur de la limite Shadow DOM si vous travaillez avec Shadow DOM, une technologie Web qui permet l'encapsulation des arborescences DOM et des styles CSS.
Dans ce cas, la propriété parentElement est également applicable.
À titre d’illustration, considérons ce qui suit :
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
L'attribut shadowRoot de l'élément hôte est utilisé dans le code ci-dessus pour acquérir d'abord la racine fantôme. À l'aide de la fonction getElementById, nous choisissons ensuite l'élément enfant dans la racine fantôme en fonction de son ID.
Grâce à la propriété parentElement, nous pouvons enfin récupérer l'élément parent. Cela vous permet d'accéder à l'élément parent même à l'intérieur d'un Shadow DOM.
Éléments positionnés avec la propriété offsetParent :
Vous pouvez utiliser la propriété offsetParent conjointement avec les propriétés offsetLeft et offsetTop pour localiser l'élément ancêtre positionné le plus proche d'un élément donné si vous en avez explicitement besoin.
Voici une illustration :
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } En utilisant getElementById, nous choisissons d'abord l'élément cible dans cette ligne de code. Après cela, le offsetParent de l'élément cible est utilisé pour initialiser la variable positionnéeAncestor.
L'étape suivante consiste à déterminer si le positionnéAncêtre actuel a une position calculée « statique » à l'aide d'une boucle while.
PositionnéAncestor est mis à jour vers le offsetParent du positionnéAncestor actuel si c'est le cas.
Ce processus se poursuit jusqu'à ce que nous localisions l'ancêtre le plus proche de notre emplacement actuel ou atteignions le sommet de l'arborescence DOM.
Vous pouvez encore améliorer votre capacité à récupérer l'élément parent en JavaScript en utilisant ces stratégies et méthodes supplémentaires. Ces méthodes offrent des réponses à une série de problèmes, notamment la gestion du Shadow DOM, la gestion de divers types de nœuds et la localisation de l'ancêtre le plus proche.
Choisissez une technique qui répond à vos exigences uniques et améliore vos compétences en manipulation du DOM.
Si vous utilisez des méthodes ou des fonctionnalités plus récentes, n'oubliez pas de tester minutieusement votre code dans divers navigateurs pour vérifier la compatibilité.
alternative à mylivecricket
Vous disposerez des connaissances et des capacités nécessaires pour travailler avec des éléments parents en JavaScript et créer des expériences en ligne dynamiques et interactives après avoir bien maîtrisé ces concepts.
Vous disposez désormais de méthodes supplémentaires en JavaScript pour atteindre l’élément parent.
Comprendre ces techniques améliorera votre capacité à modifier et à interagir correctement avec le DOM, que vous travailliez avec la gestion d'événements, des éléments dynamiques ou que vous ayez besoin de découvrir l'ancêtre positionné le plus proche.
Sélectionnez toujours l'approche qui correspond le mieux à votre cas d'utilisation unique, en gardant à l'esprit la compatibilité du navigateur et les besoins précis de votre projet. Avec ces méthodes à votre disposition, vous disposerez des compétences requises pour explorer et travailler facilement avec les composants parents en JavaScript.