QuerySelector()
בעיקרון, querySelector() משמש עם 'this.template' שמביא את האלמנטים הקיימים בתבנית מסוימת. אם יש מספר אלמנטים, הוא ישקול רק את האלמנט הראשון. Null מוחזר אם האלמנט שצוין לא קיים בתבנית. זה לוקח את הבורר כפרמטר. זה יכול להיות תג שם הכיתה. המזהה לא יהיה נתמך. במקרים מסוימים, יש לך אותם מחלקות אבל ערכים שונים. בתרחיש זה, עלינו להשתמש ב-data-recid שמקבל את האלמנטים על סמך הערך.
תחביר:
בואו נראה כיצד לציין את הבורר בתוך ה-querySelector().
- this.template.querySelector(selector)
- this.template.querySelector(‘[data-recid=”value”]’)
לדוגמה: אם הבורר הוא תג h1, עליך לציין אותו בתור 'h1'.
1. כל הדוגמאות משתמשות בקובץ 'meta.xml' זה. לא נפרט זאת בכל דוגמה. ניתן להוסיף את רכיבי ה-LWC לדף ההקלטה, לדף האפליקציה או לדף הבית שלך.
'1.0' ?>
<מטרות>
2. בכל הדוגמאות שאנו הולכים לדון בהן במדריך זה, לוגיקה מסופקת כקוד 'js'. לאחר מכן, אנו מציינים את צילום המסך הכולל את כל הקוד 'js'.
דוגמה 1:
ראשית, אנו יוצרים את התגים h1, div, span ו-lightning-button עם קצת טקסט בקובץ ה-HTML. כמו כן, אנו יוצרים כפתור שמקבל את האלמנטים הקודמים כאשר לוחצים עליו. בקובץ 'js', אנו מחזירים את innerText של כל ארבעת האלמנטים הללו דרך this.template.querySelector().
firstExample.html
<תבנית><גרסה של כרטיס ברק = 'לְצַמְצֵם' כותרת = 'שלום' סמל- שֵׁם = 'רגיל:חשבון' >
< h1 > שלום LinuxHint. אני ב-h1 < / h1 >
< div > שלום LinuxHint. אני ב-div < / div >
< לְהַקִיף > שלום LinuxHint. אני בטווח < / לְהַקִיף >
<קלט-ברק סוּג = 'טֶקסט' גִרְסָה אַחֶרֶת = 'תֶקֶן' שֵׁם = 'שֵׁם' תווית = 'קלט טקסט' >
שלום LinuxHint. אני בקלט ברק < / כניסת ברק>
<גרסה של כפתור ברק = 'בסיס' תווית = 'קבל פרטים' בלחיצה = { getDetails } >< / כפתור ברק>
< / ברק-כרטיס>
< / תבנית>
firstExample.js
getDetails ( ) {// קבל את הטקסט הפנימי של תג h1.
לְנַחֵם. עֵץ ( זֶה . תבנית . querySelector ( 'h1' ) . innerText ) ;
// קבל את הטקסט הפנימי של התג div.
לְנַחֵם. עֵץ ( זֶה . תבנית . querySelector ( 'div' ) . innerText ) ;
// קבל את הטקסט הפנימי של תג span.
לְנַחֵם. עֵץ ( זֶה . תבנית . querySelector ( 'לְהַקִיף' ) . innerText ) ;
// קבל את הטקסט הפנימי של קלט ברק.
לְנַחֵם. עֵץ ( זֶה . תבנית . querySelector ( 'קלט ברק' ) . innerText ) ;
}
כל הקוד:
תְפוּקָה:
הוסף את הרכיב הזה לדף 'Record' של כל אובייקט (הוספנו אותו לדף הרשומה של החשבון). בדוק את החלון הזה ועבור ללשונית 'קונסול'.
כעת, לחץ על כפתור 'קבל פרטים'. לאחר מכן, תראה שה-innerText מוצג בקונסולה עבור כל האלמנטים.
דוגמה 2:
השתמש ברכיב שנדון בדוגמה 1. ציין את שני האלמנטים עם התג 'h1' ברכיב ה-HTML והשתמש ב-querySelector() בקובץ 'js' כדי לקבל את innerText של 'h1'.
firstExample.html
<תבנית><גרסה של כרטיס ברק = 'לְצַמְצֵם' כותרת = 'שלום' סמל- שֵׁם = 'רגיל:חשבון' >
< h1 > שלום LinuxHint. אני הראשון h1 < / h1 >
< h1 > שלום LinuxHint. אני שני h1 < / h1 >
<גרסה של כפתור ברק = 'בסיס' תווית = 'קבל פרטים' בלחיצה = { getDetails } >< / כפתור ברק>
< / ברק-כרטיס>
< / תבנית>
firstExample.js
getDetails ( ) {// קבל את הטקסט הפנימי של תג h1.
לְנַחֵם. עֵץ ( זֶה . תבנית . querySelector ( 'h1' ) . innerText ) ;
}
כל הקוד:
תְפוּקָה:
ישנם שני אלמנטים עם אותו תג. אז, ה-querySelector() בוחר רק את האלמנט הראשון. כאשר תלחץ על כפתור 'קבל פרטים', תראה את ה-'h1' הראשון והטקסט הפנימי מוחזר בקונסולה.
דוגמה 3:
אנחנו יכולים גם לאחסן את querySelector() במשתנה ולהשתמש במשתנה הזה כדי לקבל את innerText. בואו ניצור תג span עם קצת טקסט ונחזיר את innerText בקונסולה על ידי אחסון זה במשתנה.
firstExample.html
<תבנית><גרסה של כרטיס ברק = 'לְצַמְצֵם' כותרת = 'שלום' סמל- שֵׁם = 'רגיל:חשבון' >
< לְהַקִיף > שלום LinuxHint. אני span < / לְהַקִיף >< br >
<גרסה של כפתור ברק = 'בסיס' תווית = 'קבל פרטים' בלחיצה = { getDetails } >< / כפתור ברק>
< / ברק-כרטיס>
< / תבנית>
firstExample.js
getDetails ( ) {// קבל את הטקסט הפנימי של תג span.
תן לו = זֶה . תבנית . querySelector ( 'לְהַקִיף' ) . innerText
לְנַחֵם. עֵץ ( הוא ) ;
}
כל הקוד:
תְפוּקָה:
דוגמה 4:
בדוגמה זו, אנו יוצרים כפתור ומזין טקסט (קלט-ברק) שייקח את הנושא כמחרוזת. אנו מעבירים את ה-'lightning-input' בתור הבורר לשיטת querySelector() . הוא מוקצה למשתנה 'computer_related'. בלחיצה על כפתור זה, הערך הקיים במשתנה זה מוצג.
secondExample.html
<תבנית><כרטיס ברק כותרת = 'נושא' >
< מֶרְכָּז >
<קלט-ברק תווית = 'הזן נושא' ערך = { מחשב_קשור } >< / כניסת ברק>
< ע > הנושא שלך הוא: < ב > {למחשב_קשורה} < / ב > < / ע >
< / מֶרְכָּז >
<כפתור ברק תווית = 'בחר כאן' בלחיצה = { handleSubject } >< / כפתור ברק>
< / ברק-כרטיס>
< / תבנית>
secondExample.js
מחשב_קשורhandleSubject ( מִקרֶה ) {
זֶה . מחשב_קשור = זֶה . תבנית . querySelector ( 'כניסת ברק' ) . ערך ;
}
כל הקוד:
תְפוּקָה:
דוגמה 5:
כאן, אנו משתמשים ב-data-recid. בואו ניצור כפתור עם שלוש תגיות span עם recid כ-'Span1', 'Span2' ו-'Span3' בקובץ ה-HTML. בחר את הטווח הראשון על ידי העברת 'Span1' ל-data-recid ב-querySelector().
thirdExample.html
<תבנית><כרטיס ברק כותרת = 'זיהוי על סמך מזהה נתונים' >
< לְהַקִיף data-recid = 'Span1' > אני ב-span-1 < / לְהַקִיף >< br >
< לְהַקִיף data-recid = 'Span2' > אני ב-span-2 < / לְהַקִיף >< br >
< לְהַקִיף data-recid = 'ספאן3' > אני ב-span-3 < / לְהַקִיף >< br >
<גרסה של כפתור ברק = 'בסיס' תווית = 'קבל פרטים' בלחיצה = { getDetails } >< / כפתור ברק>
< / ברק-כרטיס>
< / תבנית>
thirdExample.js
getDetails ( ) {// קבל את innerText של Span1
לְנַחֵם. עֵץ ( זֶה . תבנית . querySelector ( '[data-recid='Span1']' ) . innerText ) ;
}
כל הקוד:
תְפוּקָה:
סיכום
למדנו כיצד להשתמש ב- querySelector() כדי לגשת לרכיבי DOM. ה-querySelector() השתמש ב-'this.template' כדי לבחור את האלמנטים בתבנית הנוכחית. זה יכול להיות אפשרי לאחסן את זה במשתנה או להשתמש בו ישירות. שני אלה מוזכרים עם דוגמאות. כמו כן, סיפקנו דוגמה הכוללת מספר אלמנטים. במקרה זה, ה-querySelector() מחזיר את האלמנט הראשון.