Obtenez des éléments enfants par nom de balise en utilisant JavaScript

Lors de la programmation en JavaScript, il peut y avoir plusieurs éléments contre le même nom de balise qui doit être récupéré pour effectuer des fonctionnalités spécifiques. Ces éléments peuvent être utilisés pour associer les éléments des parents et des enfants. Dans de tels cas, l'obtention d'éléments enfants par le nom de balise utilisant JavaScript est d'une grande aide pour simplifier la complexité du code et fournir un service public à l'utilisateur final.

Ce tutoriel expliquera les approches pour obtenir des éléments enfants par nom de balise en javascript.

Comment obtenir des éléments enfants en utilisant le nom de la balise en javascript?

Pour obtenir des éléments enfants par nom de balise en javascript, appliquez les méthodes suivantes:

• "queySelectorall () "
• "getElementByid ()" et "getElementsByTagName ()«Méthodes.

Méthode 1: Obtenez des éléments enfants par nom de balise en javascrip

Le "queySelectorall ()»La méthode récupère tous les éléments correspondant à un (s) sélecteur (s) CSS et renvoie une liste de nœuds. Cette méthode peut être appliquée pour obtenir les éléments enfants correspondants en faisant référence au «identifiant”De l'élément parent et du nom de balise des éléments enfants en une seule fois.

Syntaxe

document.QuerySelectorall (sélecteurs)

Dans la syntaxe donnée:

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

Exemple

Voyons l'exemple suivant:

C'est une image

Dans l'extrait de code ci-dessus:

• Inclure le "div"Élément ayant le déclaré"identifiant".
• Ajoutez également un titre et une image comme «enfant»Éléments, respectivement.
• Dans le code JavaScript, accédez au «div«Élément (parent) par son«identifiant»Et le titre (enfant) et l'image (enfant) par leur«étiqueter" nom.
• Cela renverra les éléments enfants récupérés par les noms de balises dans la dernière étape.

Sortir

La sortie ci-dessus signifie que les éléments enfants sont récupérés avec succès. Passons à l'approche suivante pour atteindre les mêmes fonctionnalités.

Méthode 2: Obtenez des éléments enfants par nom de balise en javascrip

Le "getElementByid ()«La méthode donne un élément ayant l'ID correspondant, et le« «getElementsByTagName ()»La méthode renvoie une collection de tous les éléments ayant le nom de la balise. Ces méthodes peuvent être implémentées de même pour récupérer l'élément parent par son identifiant et les éléments enfants par leur nom de balise. Mais ici, des méthodes distinctes sont nécessaires pour effectuer les fonctionnalités spécifiées séparément.

Syntaxe

document.getElementByid (id)

Dans la syntaxe ci-dessus:

• "IDENTIFIANT"Porte l'élément associé"identifiant"

document.GetElementsByTagName (TAG)

Dans la syntaxe fournie:

• "étiqueter»Représente le nom de la balise de l'élément.

Exemple

Passons par l'exemple suivant:

Nom	Âge	Ville
Harceler	25	Los Angeles

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

• Spécifie le "tableau«Élément (parent) ayant le«identifiant".
• Après cela, ajoutez le "Données de table" élément ayant les données spécifiées dans le «rangée de table" élément.
• Dans le code JavaScript, premièrement, récupère l'élément parent par son identifiant en utilisant le «getElementByid ()" méthode.
• Accédez également à l'élément enfant par son nom de balise en utilisant le «getElementsByTagName ()”Méthode simultanément.
• Cela entraînera la récupération de tous les éléments enfants correspondant au nom de la balise indiqué.

Sortir

Dans la sortie ci-dessus, on peut observer que tous les ««TD«Les éléments enfants du tableau (parent) sont récupérés avec succès.

Conclusion

Le "queySelectorall ()"Méthode, le"getElementByid ()", ou la "getElementsByTagName ()«Les méthodes peuvent être utilisées pour obtenir des éléments enfants par nom de balise en utilisant JavaScript. La première méthode peut être appliquée pour accéder à l'élément parent par son identifiant et les éléments enfants par leurs noms de balises séparément. Ces dernières méthodes peuvent être implémentées pour obtenir l'ID de l'élément parent et les noms de balises des éléments enfants en utilisant des méthodes distinctes pour chaque fonctionnalité. Ce blog a démontré pour récupérer les éléments enfants par le nom de la balise en javascript.