Cet article fournit la procédure pour récupérer l'ID d'un élément d'ancrage à l'intérieur d'un élément de liste en JavaScript.
Comment récupérer l'ID d'une ancre dans un élément de liste en JavaScript ?
L'attribut ID d'un élément est un identifiant unique qui peut être utilisé pour manipuler et utiliser cet élément dans une fonction JavaScript. Les utilisateurs peuvent obtenir l'élément en utilisant son identifiant via différentes méthodes. Cependant, il peut être difficile de récupérer l'ID d'un élément HTML. Cependant, il peut s'avérer un peu complexe de récupérer l'attribut ID d'un élément HTML.
De même, dans le cas d’éléments d’ancrage à l’intérieur d’un « élément de liste », l'utilisateur ne peut pas appeler directement l'élément d'ancrage et obtenir son identifiant car il y aura plusieurs éléments d'ancrage tels qu'ils sont présents dans une liste. Pour cette situation, la démonstration ci-dessous montre comment récupérer l'ID d'un élément Anchor à l'intérieur d'un élément de liste :
< HTML >
< corps >
< div >
< ul identifiant = 'liste' >
< que >
< un identifiant = 'ancre1' href = '#' > Élément d'ancrage 1 < / un >
< / que >
< que >
< un identifiant = 'ancre2' href = '#' > Élément d'ancrage 2 < / un >
< / que >
< que >
< un identifiant = 'ancre3' href = '#' > Élément d'ancrage 3 < / un >
< / que >
< / ul >
< / div >
< p > Cliquez sur le bouton ci-dessous pour obtenir les identifiants des éléments d'ancrage de la liste ci-dessus ! < / p >
< bouton sur clic = 'maFonction()' > Obtenir des identifiants < / bouton >
< p identifiant = 'racine' >< / p >
< scénario >
fonction maFonction() {
let listItems = document.querySelectorAll('#list a[id]');
pour (soit i = 0; i < listItems.length; je++ ) {
laisser identifiant = listeItems [ je ] . identifiant ;
document.getElementById ( 'racine' ) .innerHTML + =
'ID de l'élément d'ancrage ' + ( je + 1 ) + ' est: ' + identifiant + '
';
}
}
< / scénario >
< / corps >
< / HTML >
L'explication du code ci-dessus est la suivante :
- Une liste non ordonnée avec un identifiant ' liste ' est créé et contenu dans ' ' Mots clés.
- Trois balises d'ancrage sont créées dans les éléments de la liste et sont dotées d'identifiants ' ancre1 ', ' ancre2 ', et ' ancre3 ' respectivement.
- Ensuite, un « 'L'élément est créé et contient du contenu textuel.
- Ensuite, un élément bouton est créé à l’aide du «
' Mots clés. Le ' sur clic() ' L'attribut ' du bouton est doté d'une fonction appelée ' maFonction() ». - Un vide ' ' élément avec ID ' pour ' est créé.
- Ensuite, à l'intérieur du '
À partir de la sortie ci-dessous, les éléments d'ancrage sont présents dans une liste et l'utilisateur peut obtenir leurs identifiants en cliquant sur le bouton « Obtenir des identifiants ' bouton.
Il s’agit de récupérer les identifiants des éléments d’ancrage à l’intérieur des éléments de la liste.
Conclusion
Pour récupérer l'ID d'un élément d'ancrage à l'intérieur d'un élément de liste, le JavaScript intégré ' document.querySelectorAll() ' La méthode peut être utilisée. De plus, les identifiants obtenus de ces éléments d'ancrage peuvent être imprimés sur la page Web à l'aide du JavaScript intégré ' .innerHTML() ' méthode. Cet article a fourni la procédure pour récupérer l'ID d'un élément d'ancrage à l'intérieur d'un élément de liste en JavaScript.