QuerySelector()
По сути, querySelector() используется с «this.template», который извлекает элементы, присутствующие в определенном шаблоне. Если элементов несколько, будет учитываться только первый элемент. Значение NULL возвращается, если указанный элемент не существует в шаблоне. Он принимает селектор в качестве параметра. Это может быть тег имени класса. Идентификатор не будет поддерживаться. В некоторых случаях у вас одни и те же классы, но разные значения. В этом сценарии нам нужно использовать 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
<шаблон><вариант карты молнии '=' 'Узкий' заголовок '=' 'Привет' икона- имя '=' 'стандарт:учетная запись' >
< ч1 > Привет LinuxHint. я в часе 1 < / ч1 >
< div > Привет LinuxHint. я в div < / div >
< охватывать > Привет LinuxHint. я в пролете < / охватывать >
<молния-вход тип '=' 'текст' вариант '=' 'стандартный' имя '=' 'имя' этикетка '=' 'ввод текста' >
Привет LinuxHint. Я нахожусь в режиме Lightning < / молниеносный вход>
<вариант с кнопкой-молнией '=' 'база' этикетка '=' «Узнай подробности» по щелчку '=' { getDetails } >< / кнопка-молния>
< / молния-карта>
< / шаблон>
firstExample.js
getDetails ( ) {// Получаем внутренний текст тега h1.
консоль. бревно ( этот . шаблон . запросселектор ( 'h1' ) . внутреннийтекст ) ;
// Получаем внутренний текст тега div.
консоль. бревно ( этот . шаблон . запросселектор ( 'див' ) . внутреннийтекст ) ;
// Получаем внутренний текст тега span.
консоль. бревно ( этот . шаблон . запросселектор ( 'охватывать' ) . внутреннийтекст ) ;
// Получаем внутренний текст ввода молнии.
консоль. бревно ( этот . шаблон . запросселектор ( 'молния-вход' ) . внутреннийтекст ) ;
}
Весь код:
Выход:
Добавьте этот компонент на страницу «Запись» любого объекта (мы добавили его на страницу «Запись аккаунта»). Осмотрите это окно и перейдите на вкладку «Консоль».
Теперь нажмите кнопку «Получить подробности». После этого вы увидите, что в консоли отображается внутренний текст для всех элементов.
Пример 2:
Используйте компонент, описанный в примере 1. Укажите два элемента с тегом «h1» в компоненте HTML и используйте querySelector() в файле «js», чтобы получить внутренний текст «h1».
firstExample.html
<шаблон><вариант карты молнии '=' 'Узкий' заголовок '=' 'Привет' икона- имя '=' 'стандарт:учетная запись' >
< ч1 > Привет LinuxHint. я первый h1 < / ч1 >
< ч1 > Привет LinuxHint. Я второй h1 < / ч1 >
<вариант с кнопкой-молнией '=' 'база' этикетка '=' «Узнай подробности» по щелчку '=' { getDetails } >< / кнопка-молния>
< / молния-карта>
< / шаблон>
firstExample.js
getDetails ( ) {// Получаем внутренний текст тега h1.
консоль. бревно ( этот . шаблон . запросселектор ( 'h1' ) . внутреннийтекст ) ;
}
Весь код:
Выход:
Есть два элемента с одним и тем же тегом. Итак, querySelector() выбирает только первый элемент. Когда вы нажмете кнопку «Получить подробности», вы увидите первый «h1», и внутренний текст будет возвращен в консоль.
Пример 3:
Мы также можем сохранить querySelector() в переменной и использовать эту переменную для получения внутреннего текста. Давайте создадим тег span с некоторым текстом и вернем внутренний текст на консоль, сохранив его в переменной.
firstExample.html
<шаблон><вариант карты молнии '=' 'Узкий' заголовок '=' 'Привет' икона- имя '=' 'стандарт:учётная запись' >
< охватывать > Привет LinuxHint. я пролет < / охватывать >< бр >
<вариант с кнопкой-молнией '=' 'база' этикетка '=' «Узнай подробности» по щелчку '=' { getDetails } >< / кнопка-молния>
< / молния-карта>
< / шаблон>
firstExample.js
getDetails ( ) {// Получаем внутренний текст тега span.
позволь ему '=' этот . шаблон . запросселектор ( 'охватывать' ) . внутреннийтекст
консоль. бревно ( он ) ;
}
Весь код:
Выход:
Пример 4:
В этом примере мы создаем кнопку и вводим текст (lightning-input), который будет принимать тему в виде строки. Мы передаем «lightning-input» в качестве селектора в метод querySelector(). Он присваивается переменной «компьютер_родед». При нажатии этой кнопки отображается значение, присутствующее в этой переменной.
второйExample.html
<шаблон><карта-молния заголовок '=' 'Предмет' >
< центр >
<молния-вход этикетка '=' «Введите тему» ценить '=' { компьютер_связанный } >< / молниеносный вход>
< п > Ваша тема: < б > {компьютер_связанный} < / б > < / п >
< / центр >
<кнопка-молния этикетка '=' «Выбрать здесь» по щелчку '=' { handleSubject } >< / кнопка-молния>
< / молния-карта>
< / шаблон>
второйExample.js
компьютер_связанныйhandleSubject ( событие ) {
этот . компьютер_связанный '=' этот . шаблон . запросселектор ( 'молния-вход' ) . ценить ;
}
Весь код:
Выход:
Пример 5:
Здесь мы используем data-recid. Давайте создадим кнопку с тремя тегами диапазона, которые будут записаны как «Span1», «Span2» и «Span3» в HTML-файле. Выберите первый диапазон, передав «Span1» в data-recid в querySelector().
третийExample.html
<шаблон><карта-молния заголовок '=' «Идентификация по идентификатору данных» >
< охватывать данные-recid '=' 'Пролет1' > я в пролете-1 < / охватывать >< бр >
< охватывать данные-recid '=' «Пролет2» > я в пролете-2 < / охватывать >< бр >
< охватывать данные-recid '=' 'Спан3' > я в пролете-3 < / охватывать >< бр >
<вариант с кнопкой-молнией '=' 'база' этикетка '=' «Узнай подробности» по щелчку '=' { getDetails } >< / кнопка-молния>
< / молния-карта>
< / шаблон>
третийExample.js
getDetails ( ) {// Получаем внутренний текст Span1
консоль. бревно ( этот . шаблон . запросселектор ( '[data-recid='Span1']' ) . внутреннийтекст ) ;
}
Весь код:
Выход:
Заключение
Мы узнали, как использовать querySelector() для доступа к элементам DOM. Функция querySelector() использовала «this.template» для выбора элементов в текущем шаблоне. Это можно сохранить в переменной или использовать напрямую. Оба они упомянуты с примерами. Кроме того, мы предоставили пример, включающий несколько элементов. В этом случае querySelector() возвращает первый элемент.