쿼리선택기()
기본적으로 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:
먼저 HTML 파일의 일부 텍스트를 사용하여 h1, div,span 및 Lightning-button 태그를 만듭니다. 또한 클릭하면 이전 요소를 가져오는 버튼을 만듭니다. 'js' 파일에서는 this.template.querySelector()를 통해 이 네 가지 요소 모두의 innerText를 반환합니다.
firstExample.html
<템플릿><번개 카드 변형 = '좁은' 제목 = '안녕하세요' 상- 이름 = '표준:계정' >
< h1 > 안녕하세요 리눅스힌트입니다. 나는 h1에 있어요 < / h1 >
< div > 안녕하세요 리눅스힌트입니다. 나는 div에 있습니다 < / div >
< 기간 > 안녕하세요 리눅스힌트입니다. 나는 범위에있다 < / 기간 >
<번개 입력 유형 = '텍스트' 변종 = '기준' 이름 = '이름' 상표 = '텍스트 입력' >
안녕하세요 리눅스힌트입니다. 나는 번개 입력에 있습니다 < / 번개 입력>
<번개 버튼 변형 = '베이스' 상표 = '세부정보 가져오기' 클릭하면 = { 세부정보 가져오기 } >< / 번개 버튼>
< / 번개카드>
< / 템플릿>
firstExample.js
세부정보 가져오기 ( ) {// h1 태그의 내부 텍스트를 가져옵니다.
콘솔. 통나무 ( 이것 . 주형 . 쿼리선택기 ( 'h1' ) . 내부텍스트 ) ;
// div 태그의 내부 텍스트를 가져옵니다.
콘솔. 통나무 ( 이것 . 주형 . 쿼리선택기 ( 'div' ) . 내부텍스트 ) ;
//span 태그의 내부 텍스트를 가져옵니다.
콘솔. 통나무 ( 이것 . 주형 . 쿼리선택기 ( '기간' ) . 내부텍스트 ) ;
// Lightning 입력의 내부 텍스트를 가져옵니다.
콘솔. 통나무 ( 이것 . 주형 . 쿼리선택기 ( '번개 입력' ) . 내부텍스트 ) ;
}
전체 코드:
산출:
이 구성 요소를 개체의 '레코드' 페이지에 추가합니다(계정 레코드 페이지에 추가했습니다). 이 창을 검사하고 '콘솔' 탭으로 이동하세요.
이제 '세부정보 가져오기' 버튼을 클릭하세요. 그런 다음 모든 요소에 대한 innerText가 콘솔에 표시되는 것을 볼 수 있습니다.
예 2:
예제 1에서 설명한 구성 요소를 활용합니다. HTML 구성 요소에 'h1' 태그로 두 요소를 지정하고 'js' 파일에서 querySelector()를 사용하여 'h1'의 innerText를 가져옵니다.
firstExample.html
<템플릿><번개 카드 변형 = '좁은' 제목 = '안녕하세요' 상- 이름 = '표준:계정' >
< h1 > 안녕하세요 리눅스힌트입니다. 나는 처음이다 h1 < / h1 >
< h1 > 안녕하세요 리눅스힌트입니다. 나는 두 번째야 h1 < / h1 >
<번개 버튼 변형 = '베이스' 상표 = '세부정보 가져오기' 클릭하면 = { 세부정보 가져오기 } >< / 번개 버튼>
< / 번개카드>
< / 템플릿>
firstExample.js
세부정보 가져오기 ( ) {// h1 태그의 내부 텍스트를 가져옵니다.
콘솔. 통나무 ( 이것 . 주형 . 쿼리선택기 ( 'h1' ) . 내부텍스트 ) ;
}
전체 코드:
산출:
동일한 태그를 가진 요소가 두 개 있습니다. 따라서 querySelector()는 첫 번째 요소만 선택합니다. “Get Details” 버튼을 클릭하면 첫 번째 “h1”이 표시되고 내부 텍스트가 콘솔에 반환됩니다.
예시 3:
querySelector()를 변수에 저장하고 이 변수를 사용하여 innerText를 가져올 수도 있습니다. 텍스트가 포함된 범위 태그를 생성하고 이를 변수에 저장하여 콘솔에 innerText를 반환해 보겠습니다.
firstExample.html
<템플릿><번개 카드 변형 = '좁은' 제목 = '안녕하세요' 상- 이름 = '표준:계정' >
< 기간 > 안녕하세요 리눅스힌트입니다. 나는 스팬이다 < / 기간 >< br >
<번개 버튼 변형 = '베이스' 상표 = '세부정보 가져오기' 클릭하면 = { 세부정보 가져오기 } >< / 번개 버튼>
< / 번개카드>
< / 템플릿>
firstExample.js
세부정보 가져오기 ( ) {//span 태그의 내부 텍스트를 가져옵니다.
그를 보자 = 이것 . 주형 . 쿼리선택기 ( '기간' ) . 내부텍스트
콘솔. 통나무 ( 그 ) ;
}
전체 코드:
산출:
예시 4:
이 예에서는 주제를 문자열로 사용하는 버튼과 입력 텍스트(번개 입력)를 만듭니다. 'lightning-input'을 선택기로 querySelector() 메서드에 전달합니다. 이는 'computer_관련' 변수에 할당됩니다. 이 버튼을 클릭하면 이 변수에 존재하는 값이 표시됩니다.
두 번째Example.html
<템플릿><번개 카드 제목 = '주제' >
< 센터 >
<번개 입력 상표 = '제목을 입력하세요' 값 = { 컴퓨터 관련 } >< / 번개 입력>
< 피 > 귀하의 주제는 다음과 같습니다: < 비 > {컴퓨터_관련} < / 비 > < / 피 >
< / 센터 >
<번개 버튼 상표 = '여기를 선택하세요' 클릭하면 = { 핸들제목 } >< / 번개 버튼>
< / 번개카드>
< / 템플릿>
secondExample.js
컴퓨터 관련핸들제목 ( 이벤트 ) {
이것 . 컴퓨터 관련 = 이것 . 주형 . 쿼리선택기 ( '번개 입력' ) . 값 ;
}
전체 코드:
산출:
예시 5:
여기서는 data-recid를 활용합니다. HTML 파일에서 'Span1', 'Span2' 및 'Span3'이라는 Recid가 포함된 세 개의 스팬 태그가 있는 버튼을 만들어 보겠습니다. querySelector()의 data-recid에 'Span1'을 전달하여 첫 번째 범위를 선택합니다.
thirdExample.html
<템플릿><번개 카드 제목 = 'data-id를 기준으로 식별' >
< 기간 데이터 기록 = '스팬1' > 나는 스팬-1에 있다 < / 기간 >< br >
< 기간 데이터 기록 = '스팬2' > 나는 스팬-2에 있다 < / 기간 >< br >
< 기간 데이터 기록 = '스팬3' > 나는 스팬-3에 있다 < / 기간 >< br >
<번개 버튼 변형 = '베이스' 상표 = '세부정보 가져오기' 클릭하면 = { 세부정보 가져오기 } >< / 번개 버튼>
< / 번개카드>
< / 템플릿>
thirdExample.js
세부정보 가져오기 ( ) {// Span1의 innerText를 가져옵니다.
콘솔. 통나무 ( 이것 . 주형 . 쿼리선택기 ( '[data-recid='Span1']' ) . 내부텍스트 ) ;
}
전체 코드:
산출:
결론
DOM 요소에 액세스하기 위해 querySelector()를 활용하는 방법을 배웠습니다. querySelector()는 'this.template'을 사용하여 현재 템플릿의 요소를 선택했습니다. 이를 변수에 저장하거나 직접 사용할 수 있습니다. 이 두 가지 모두 예와 함께 언급됩니다. 또한 여러 요소가 포함된 예제를 제공했습니다. 이 경우 querySelector()는 첫 번째 요소를 반환합니다.