Obtenez l'attribut d'un nœud parent à l'aide de JavaScript

Tout en traitant des codes complexes, il est souvent nécessaire d'accéder à l'attribut d'un nœud parent particulier contre plusieurs nœuds enfants pour appliquer ses fonctionnalités. Dans un tel cas, l'utilisation des attributs définis devient pratique plutôt que de les affecter à plusieurs reprises. De plus, l'attribut d'un nœud parent à l'aide de JavaScript aide à rendre l'accès possible et à utiliser efficacement les attributs attribués.

Ce tutoriel discutera des approches pour obtenir l'attribut d'un nœud parent à l'aide de JavaScript.

Comment obtenir l'attribut d'un nœud parent à l'aide de JavaScript?

L'attribut du nœud parent peut être récupéré dans JavaScript en utilisant les approches suivantes:

• "parentélement»Propriété avec le«getAttribute ()" méthode.
• "le plus proche()" et "getAttribute ()«Méthodes.
• "jquery«Méthodes.

Approche 1: Obtenez l'attribut d'un nœud parent dans JavaScript en utilisant la propriété Parentement avec la méthode getAttribute ()

Le "parentélement»La propriété donne l'élément parent de l'élément associé. Tandis que le "getAttribute ()»La méthode renvoie la valeur de l'attribut d'un élément. Ces méthodes peuvent être appliquées en combinaison pour accéder au nœud enfant et obtenir l'attribut particulier du nœud parent en se référant au nœud enfant.

Syntaxe

élément.getAttribute (nom)

Dans la syntaxe donnée ci-dessus:

"nom"Porte le nom de l'attribut.

Exemple
Présentation de l'exemple suivant:

Ceci est le site Web de Linuxhint

Dans l'extrait de code ci-dessus:

• Tout d'abord, incluez le «"Élément ayant le déclaré"identifiant«Qui sera considéré comme le«parent»Node.
• Dans l'étape suivante, spécifiez le «

  "Élément ayant le spécifié"identifiant», Qui sera traité comme le«enfant»Node.

• Dans le code JS, accédez au nœud enfant par son «identifiant"Via le"getElementByid ()" méthode.
• Après cela, associez le «parentélement«Propriété et le«getAttribute ()»Méthodes au nœud enfant récupéré.
• Cela entraînera la récupération de l'attribut spécifié du nœud parent en se référant au nœud enfant.

Sortir

Dans la sortie ci-dessus, on peut observer qu'en faisant référence à «l'ID» du nœud parent, l'attribut de jeu correspondant s'affiche.

Approche 2: Obtenez l'attribut d'un nœud parent dans JavaScript en utilisant les méthodes les plus rapprochées () et getAttribute ()

Le "le plus proche()»La méthode recherche les éléments d'un arbre Dom correspondant à un sélecteur CSS spécifique. Cette méthode peut être mise en œuvre en combinaison avec le «getAttribute ()”Méthode pour rechercher l'élément le plus proche de l'élément enfant particulier et récupérer son attribut (nœud parent).

Syntaxe

élément.les plus proches (sélecteurs)

Dans la syntaxe ci-dessus:

"sélecteurs»Correspond à un ou plusieurs sélecteurs CSS.

Exemple
Passons par l'exemple suivant:

C'est une image

Appliquez les étapes suivantes comme indiqué dans les lignes de code ci-dessus:

• De même, incluez le nœud parent et deux nœuds enfants ayant le déclaré «identifiant", respectivement.
• Dans le code JavaScript, accédez aux nœuds enfants, comme discuté, en utilisant le «getElementByid ()" méthode.
• Dans l'étape suivante, appliquez le «le plus proche()«Méthode faisant référence au«identifiant”De l'élément parent. Cela entraînera l'accès à l'élément le plus proche ayant l'ID indiqué.
• Appliquez également le «getAttribute ()«Méthode pour récupérer le«attribut”De l'élément parent accessible à l'étape précédente.
• Enfin, affichez l'attribut du nœud parent correspondant.

Sortir

À partir de la sortie ci-dessus, on peut voir que l'attribut du nœud parent «style"Est récupéré.

Approche 3: Obtenez l'attribut d'un nœud parent en JavaScript à l'aide de méthodes jQuery

Cette approche peut être appliquée pour accéder directement au nœud enfant et accéder à l'attribut du nœud parent en lui faisant référence via des méthodes distinctes.

Exemple
L'exemple suivant illustre le concept déclaré:

Dans le code ci-dessus:

• Inclure le "jquery»Bibliothèque pour appliquer ses méthodes.
• Après cela, spécifiez également le nœud parent et enfant. L'entrée "texte«Le champ ici agira comme«enfant»Node.
• Dans le code JS, accédez à l'élément enfant, je.e., champ de texte d'entrée. Le "parent()" et le "att ()»Les méthodes localiseront l'attribut spécifié dans l'élément parent et l'afficher via une alerte.

Sortir

La sortie ci-dessus signifie que l'exigence souhaitée est obtenue.

Conclusion

La propriété Parentement avec la méthode getAttribute () peut rediriger vers le nœud parent et récupérer son attribut particulier. Les méthodes les plus proches () et getAtTribute () peuvent récupérer l'élément le plus proche par rapport à l'élément enfant associé et récupérer son attribut. Tandis que les méthodes jQuery peuvent accéder directement au nœud enfant et utiliser des méthodes distinctes pour chaque fonction pour effectuer l'exigence souhaitée. Ce blog explique comment obtenir l'attribut d'un nœud parent dans JavaScript.