QuerySelector()
По принцип querySelector() се използва с „this.template“, който извлича елементите, които присъстват в определен шаблон. Ако има няколко елемента, той ще вземе предвид само първия елемент. Null се връща, ако указаният елемент не съществува в шаблона. Той приема селектора като параметър. Това може да бъде етикетът за име на клас. ID няма да се поддържа. В някои случаи имате едни и същи класове, но различни стойности. В този сценарий трябва да използваме data-recid, който получава елементите въз основа на стойността.
Синтаксис:
Нека да видим как да посочим селектора в querySelector().
- this.template.querySelector(селектор)
- this.template.querySelector(‘[data-recid=”value”]’)
Например: ако селекторът е h1 таг, трябва да го посочите като „h1“.
1. Всички примери използват този файл „meta.xml“. Няма да уточняваме това във всеки пример. Компонентите на LWC могат да се добавят към вашата страница със записи, страница с приложения или начална страница.
'1,0' ?>
<цели>
2. Във всички примери, които ще обсъдим в това ръководство, Logic се предоставя като код „js“. След това посочваме екранната снимка, която включва целия код „js“.
Пример 1:
Първо създаваме таговете h1, div, span и lightning-button с малко текст в HTML файла. Освен това създаваме бутон, който получава предишните елементи, когато се щракне върху него. Във файла „js“ връщаме вътрешния текст на всички тези четири елемента чрез this.template.querySelector().
firstExample.html
<шаблон><вариант на светкавична карта = 'тесен' заглавие = 'Здравейте' икона- име = 'стандартен: акаунт' >
< h1 > Здравей LinuxHint. Аз съм в h1 < / h1 >
< див > Здравей LinuxHint. Аз съм в див < / див >
< педя > Здравей LinuxHint. Аз съм в размах < / педя >
<светкавичен вход Тип = 'текст' вариант = 'стандартен' име = 'име' етикет = 'въвеждане на текст' >
Здравей LinuxHint. Аз съм в светкавичен вход < / светкавичен вход>
<вариант с бутон светкавица = 'база' етикет = „Получаване на подробности“ onclick = { getDetails } >< / светкавица-бутон>
< / светкавична карта>
< / шаблон>
firstExample.js
getDetails ( ) {// Получаване на вътрешния текст на h1 таг.
конзола. дневник ( това . шаблон . querySelector ( 'h1' ) . innerText ) ;
// Получаване на вътрешния текст на тага div.
конзола. дневник ( това . шаблон . querySelector ( 'div' ) . innerText ) ;
// Получаване на вътрешния текст на тага span.
конзола. дневник ( това . шаблон . querySelector ( 'участък' ) . innerText ) ;
// Вземете вътрешния текст на lightning-input.
конзола. дневник ( това . шаблон . querySelector ( 'светкавица-вход' ) . innerText ) ;
}
Целият код:
Изход:
Добавете този компонент към страницата „Запис“ на всеки обект (ние го добавихме към страницата Запис на акаунта). Проверете този прозорец и отидете на раздела „Конзола“.
Сега щракнете върху бутона „Получаване на подробности“. След това ще видите, че innerText се показва на конзолата за всички елементи.
Пример 2:
Използвайте компонента, който е обсъден в Пример 1. Посочете двата елемента с маркера „h1“ в HTML компонента и използвайте querySelector() във файла „js“, за да получите вътрешния текст на „h1“.
firstExample.html
<шаблон><вариант на светкавична карта = 'тесен' заглавие = 'Здравейте' икона- име = 'стандартен: акаунт' >
< h1 > Здравей LinuxHint. Аз съм първи h1 < / h1 >
< h1 > Здравей LinuxHint. Аз съм втори h1 < / h1 >
<вариант с бутон светкавица = 'база' етикет = „Получаване на подробности“ onclick = { getDetails } >< / светкавица-бутон>
< / светкавична карта>
< / шаблон>
firstExample.js
getDetails ( ) {// Получаване на вътрешния текст на h1 таг.
конзола. дневник ( това . шаблон . querySelector ( 'h1' ) . innerText ) ;
}
Целият код:
Изход:
Има два елемента с еднакъв етикет. И така, querySelector() избира само първия елемент. Когато щракнете върху бутона „Получаване на подробности“, ще видите първия „h1“ и вътрешният текст се връща в конзолата.
Пример 3:
Можем също да съхраним querySelector() в променлива и да използваме тази променлива, за да получим innerText. Нека създадем span таг с някакъв текст и да върнем innerText на конзолата, като го съхраним в променлива.
firstExample.html
<шаблон><вариант на светкавична карта = 'тесен' заглавие = 'Здравейте' икона- име = 'стандартен: акаунт' >
< педя > Здравей LinuxHint. Аз съм педя < / педя >< бр >
<вариант с бутон светкавица = 'база' етикет = „Получаване на подробности“ onclick = { getDetails } >< / светкавица-бутон>
< / светкавична карта>
< / шаблон>
firstExample.js
getDetails ( ) {// Получаване на вътрешния текст на тага span.
остави го = това . шаблон . querySelector ( 'участък' ) . innerText
конзола. дневник ( той ) ;
}
Целият код:
Изход:
Пример 4:
В този пример създаваме бутон и въвеждаме текст (светкавично въвеждане), който ще приеме темата като низ. Предаваме „мълниеносния вход“ като селектор на метода querySelector(). Присвоява се на променливата „computer_related“. При щракване върху този бутон се показва стойността, която присъства в тази променлива.
secondExample.html
<шаблон><светкавична карта заглавие = 'Предмет' >
< център >
<светкавичен вход етикет = „Въведете тема“ стойност = { свързано_с компютър } >< / светкавичен вход>
< стр > Вашата тема е: < b > {computer_related} < / b > < / стр >
< / център >
<светкавичен бутон етикет = „Изберете тук“ onclick = { handleSubject } >< / светкавица-бутон>
< / светкавична карта>
< / шаблон>
secondExample.js
свързано_с компютърhandleSubject ( събитие ) {
това . свързано_с компютър = това . шаблон . querySelector ( 'мълния-вход' ) . стойност ;
}
Целият код:
Изход:
Пример 5:
Тук използваме data-recid. Нека създадем бутон с три span тагова с recid като „Span1“, „Span2“ и „Span3“ в HTML файла. Изберете първия участък, като подадете „Span1“ към data-recid в querySelector().
thirdExample.html
<шаблон><светкавична карта заглавие = „Идентифициране въз основа на data-id“ >
< педя data-recid = 'Span1' > Аз съм в span-1 < / педя >< бр >
< педя data-recid = 'Span2' > Аз съм в span-2 < / педя >< бр >
< педя data-recid = 'Span3' > Аз съм в span-3 < / педя >< бр >
<вариант с бутон светкавица = 'база' етикет = „Получаване на подробности“ onclick = { getDetails } >< / светкавица-бутон>
< / светкавична карта>
< / шаблон>
thirdExample.js
getDetails ( ) {// Вземете вътрешния текст на Span1
конзола. дневник ( това . шаблон . querySelector ( '[data-recid='Span1']' ) . innerText ) ;
}
Целият код:
Изход:
Заключение
Научихме как да използваме querySelector() за достъп до DOM елементите. QuerySelector() използва „this.template“, за да избере елементите в текущия шаблон. Възможно е да съхраните това в променлива или да го използвате директно. И двете са посочени с примери. Освен това предоставихме пример, който включва множество елементи. В този случай querySelector() връща първия елемент.