QuerySelector()
Fondamentalement, querySelector() est utilisé avec « this.template » qui récupère les éléments présents dans un modèle particulier. S'il y a plusieurs éléments, seul le premier élément sera pris en compte. Null est renvoyé si l'élément spécifié n'existe pas dans le modèle. Il prend le sélecteur comme paramètre. Cela peut être la balise classname. L’ID ne sera pas pris en charge. Dans certains cas, vous avez les mêmes classes mais des valeurs différentes. Dans ce scénario, nous devons utiliser le data-recid qui obtient les éléments en fonction de la valeur.
Syntaxe:
Voyons comment spécifier le sélecteur dans querySelector().
- this.template.querySelector(sélecteur)
- this.template.querySelector('[data-recid=”value”]')
Par exemple : si le sélecteur est la balise h1, vous devez le spécifier comme « h1 ».
1. Tous les exemples utilisent ce fichier « meta.xml ». Nous ne le préciserons pas dans chaque exemple. Les composants LWC peuvent être ajoutés à votre page d'enregistrement, votre page d'application ou votre page d'accueil.
'1,0' ?>
2. Dans tous les exemples dont nous allons discuter dans ce guide, Logic est fourni sous forme de code « js ». Après cela, nous spécifions la capture d'écran qui inclut l'intégralité du code « js ».
Exemple 1:
Tout d’abord, nous créons les balises h1, div, span et Lightning-button avec du texte dans le fichier HTML. De plus, nous créons un bouton qui récupère les éléments précédents lorsqu'on clique dessus. Dans le fichier « js », nous renvoyons le innerText de ces quatre éléments via this.template.querySelector().
premierExemple.html
< h1 > Bonjour LinuxHint. je suis en h1 < / h1 >
< div > Bonjour LinuxHint. je suis en div < / div >
< portée > Bonjour LinuxHint. je suis en espagnol < / portée >
Bonjour LinuxHint. je suis en entrée éclair < / entrée Lightning>
< / carte-éclair>
< / modèle>
premierExemple.js
obtenir des détails ( ) {// Récupère le texte interne de la balise h1.
console. enregistrer ( ce . modèle . sélecteur de requête ( 'h1' ) . texte intérieur ) ;
// Récupère le texte interne de la balise div.
console. enregistrer ( ce . modèle . sélecteur de requête ( 'div' ) . texte intérieur ) ;
// Récupère le texte interne de la balise span.
console. enregistrer ( ce . modèle . sélecteur de requête ( 'portée' ) . texte intérieur ) ;
// Récupère le texte interne de Lightning-Input.
console. enregistrer ( ce . modèle . sélecteur de requête ( 'entrée éclair' ) . texte intérieur ) ;
}
Code entier :
Sortir:
Ajoutez ce composant à la page « Enregistrement » de n'importe quel objet (nous l'avons ajouté à la page d'enregistrement du compte). Inspectez cette fenêtre et accédez à l’onglet « Console ».
Maintenant, cliquez sur le bouton « Obtenir les détails ». Après cela, vous verrez que le innerText est affiché sur la console pour tous les éléments.
Exemple 2 :
Utilisez le composant décrit dans l'exemple 1. Spécifiez les deux éléments avec la balise « h1 » dans le composant HTML et utilisez querySelector() dans le fichier « js » pour obtenir le texte interne de « h1 ».
premierExemple.html
< h1 > Bonjour LinuxHint. je suis le premier h1 < / h1 >
< h1 > Bonjour LinuxHint. je suis deuxième h1 < / h1 >
< / carte-éclair>
< / modèle>
premierExemple.js
obtenir des détails ( ) {// Récupère le texte interne de la balise h1.
console. enregistrer ( ce . modèle . sélecteur de requête ( 'h1' ) . texte intérieur ) ;
}
Code entier :
Sortir:
Il y a deux éléments avec la même balise. Ainsi, querySelector() sélectionne uniquement le premier élément. Lorsque vous cliquez sur le bouton « Obtenir les détails », vous verrez le premier « h1 » et le texte interne est renvoyé dans la console.
Exemple 3 :
Nous pouvons également stocker le querySelector() dans une variable et utiliser cette variable pour obtenir le innerText. Créons une balise span avec du texte et renvoyons le innerText sur la console en le stockant dans une variable.
premierExemple.html
< portée > Bonjour LinuxHint. je suis en forme < / portée >< br >
< / carte-éclair>
< / modèle>
premierExemple.js
obtenir des détails ( ) {// Récupère le texte interne de la balise span.
laisse le = ce . modèle . sélecteur de requête ( 'portée' ) . texte intérieur
console. enregistrer ( il ) ;
}
Code entier :
Sortir:
Exemple 4 :
Dans cet exemple, nous créons un bouton et saisissons du texte (lightning-input) qui prendra le sujet sous forme de chaîne. Nous passons le « lightning-input » comme sélecteur à la méthode querySelector(). Il est affecté à la variable « computer_rated ». Au clic de ce bouton, la valeur présente dans cette variable est affichée.
secondExemple.html
< centre >
< p > Votre sujet est : < b > {En rapport avec un ordinateur} < / b > < / p >
< / centre >
< / carte-éclair>
< / modèle>
secondExample.js
En rapport avec un ordinateurhandleSubject ( événement ) {
ce . En rapport avec un ordinateur = ce . modèle . sélecteur de requête ( 'entrée Lightning' ) . valeur ;
}
Code entier :
Sortir:
Exemple 5 :
Ici, nous utilisons le data-recid. Créons un bouton avec trois balises span avec recid comme « Span1 », « Span2 » et « Span3 » dans le fichier HTML. Sélectionnez le premier span en passant « Span1 » au data-recid dans querySelector().
troisièmeExemple.html
< portée données-récidives = 'Étendue1' > je suis en span-1 < / portée >< br >
< portée données-récidives = 'Étendue2' > je suis en span-2 < / portée >< br >
< portée données-récidives = 'Étendue3' > je suis en span-3 < / portée >< br >
< / carte-éclair>
< / modèle>
troisièmeExample.js
obtenir des détails ( ) {// Récupère le texte interne de Span1
console. enregistrer ( ce . modèle . sélecteur de requête ( '[data-recid='Span1']' ) . texte intérieur ) ;
}
Code entier :
Sortir:
Conclusion
Nous avons appris à utiliser querySelector() pour accéder aux éléments DOM. Le querySelector() a utilisé « this.template » pour sélectionner les éléments dans le modèle actuel. Il peut être possible de stocker cela dans une variable ou de l'utiliser directement. Ces deux éléments sont mentionnés avec des exemples. Nous avons également fourni un exemple qui comprend plusieurs éléments. Dans ce cas, querySelector() renvoie le premier élément.