Bộ chọn truy vấn()
Về cơ bản, querySelector() được sử dụng với “this.template” để tìm nạp các phần tử có trong một mẫu cụ thể. Nếu có nhiều phần tử thì nó sẽ chỉ xem xét phần tử đầu tiên. Trả về null nếu phần tử được chỉ định không tồn tại trong mẫu. Nó lấy bộ chọn làm tham số. Đây có thể là thẻ tên lớp. ID sẽ không được hỗ trợ. Trong một số trường hợp, bạn có cùng lớp nhưng có giá trị khác nhau. Trong trường hợp này, chúng ta cần sử dụng data-recid để lấy các phần tử dựa trên giá trị.
Cú pháp:
Hãy xem cách chỉ định bộ chọn bên trong querySelector().
- this.template.querySelector(bộ chọn)
- this.template.querySelector('[data-recid='value']')
Ví dụ: nếu bộ chọn là thẻ h1, bạn nên chỉ định nó là “h1”.
1. Tất cả các ví dụ đều sử dụng tệp “meta.xml” này. Chúng tôi sẽ không chỉ định điều này trong mỗi ví dụ. Các thành phần LWC có thể được thêm vào Trang bản ghi, Trang ứng dụng hoặc Trang chủ của bạn.
'1.0' ?>
2. Trong tất cả các ví dụ mà chúng ta sẽ thảo luận trong hướng dẫn này, Logic được cung cấp dưới dạng mã “js”. Sau đó, chúng tôi chỉ định ảnh chụp màn hình bao gồm toàn bộ mã “js”.
Ví dụ 1:
Đầu tiên, chúng ta tạo các thẻ h1, div, span và Lightning-button với một số văn bản trong tệp HTML. Ngoài ra, chúng tôi tạo một nút lấy các phần tử trước đó khi nó được nhấp vào. Trong tệp “js”, chúng tôi trả về văn bản bên trong của tất cả bốn phần tử này thông qua this.template.querySelector().
firstExample.html
< h1 > Xin chào LinuxHint. Tôi ở h1 < / h1 >
< div > Xin chào LinuxHint. Tôi đang ở div < / div >
< nhịp > Xin chào LinuxHint. Tôi đang ở trong khoảng cách < / nhịp >
<đầu vào sét kiểu = 'chữ' khác nhau = 'tiêu chuẩn' tên = 'tên' nhãn = 'nhập văn bản' >
Xin chào LinuxHint. Tôi đang ở trong tình trạng đầu vào sét < / đầu vào sét>
< / thẻ sét>
< / mẫu>
firstExample.js
nhận được chi tiết ( ) {// Lấy nội dung của thẻ h1.
bảng điều khiển. nhật ký ( cái này . bản mẫu . truy vấnSelector ( 'h1' ) . văn bản bên trong ) ;
// Lấy nội dung của thẻ div.
bảng điều khiển. nhật ký ( cái này . bản mẫu . truy vấnSelector ( 'div' ) . văn bản bên trong ) ;
// Lấy nội dung của thẻ span.
bảng điều khiển. nhật ký ( cái này . bản mẫu . truy vấnSelector ( 'nhịp' ) . văn bản bên trong ) ;
// Lấy văn bản bên trong của đầu vào sét.
bảng điều khiển. nhật ký ( cái này . bản mẫu . truy vấnSelector ( 'đầu vào sét' ) . văn bản bên trong ) ;
}
Toàn bộ mã:
Đầu ra:
Thêm thành phần này vào trang “Bản ghi” của bất kỳ đối tượng nào (chúng tôi đã thêm nó vào trang Bản ghi tài khoản). Kiểm tra cửa sổ này và chuyển đến tab “Bảng điều khiển”.
Bây giờ, hãy nhấp vào nút 'Nhận thông tin chi tiết'. Sau đó, bạn sẽ thấy InnerText được hiển thị trên bảng điều khiển cho tất cả các thành phần.
Ví dụ 2:
Sử dụng thành phần được thảo luận trong Ví dụ 1. Chỉ định hai phần tử bằng thẻ “h1” trong thành phần HTML và sử dụng querySelector() trong tệp “js” để lấy nội dung của “h1”.
firstExample.html
< h1 > Xin chào LinuxHint. Tôi là người đầu tiên h1 < / h1 >
< h1 > Xin chào LinuxHint. Tôi là người thứ hai h1 < / h1 >
< / thẻ sét>
< / mẫu>
firstExample.js
nhận được chi tiết ( ) {// Lấy nội dung của thẻ h1.
bảng điều khiển. nhật ký ( cái này . bản mẫu . truy vấnSelector ( 'h1' ) . văn bản bên trong ) ;
}
Toàn bộ mã:
Đầu ra:
Có hai phần tử có cùng một thẻ. Vì vậy, querySelector() chỉ chọn phần tử đầu tiên. Khi bạn nhấp vào nút “Nhận thông tin chi tiết”, bạn sẽ thấy “h1” đầu tiên và văn bản bên trong được trả về trong bảng điều khiển.
Ví dụ 3:
Chúng ta cũng có thể lưu trữ querySelector() trong một biến và sử dụng biến này để lấy Nội dung bên trong. Hãy tạo một thẻ span với một số văn bản và trả về InnerText trên bảng điều khiển bằng cách lưu trữ nó trong một biến.
firstExample.html
< nhịp > Xin chào LinuxHint. tôi là khoảng cách < / nhịp >< anh >
< / thẻ sét>
< / mẫu>
firstExample.js
nhận được chi tiết ( ) {// Lấy nội dung của thẻ span.
để anh ta = cái này . bản mẫu . truy vấnSelector ( 'nhịp' ) . văn bản bên trong
bảng điều khiển. nhật ký ( Anh ta ) ;
}
Toàn bộ mã:
Đầu ra:
Ví dụ 4:
Trong ví dụ này, chúng tôi tạo một nút và văn bản đầu vào (đầu vào sét) sẽ lấy chủ đề dưới dạng chuỗi. Chúng tôi chuyển “đầu vào sét” làm bộ chọn cho phương thức querySelector(). Nó được gán cho biến “computer_similar”. Khi nhấp vào nút này, giá trị có trong biến này sẽ được hiển thị.
giâyExample.html
< trung tâm >
<đầu vào sét nhãn = 'Nhập chủ đề' giá trị = { liên quan đến máy tính } >< / đầu vào sét>
< P > Chủ đề của bạn là: < b > {máy tính_liên quan} < / b > < / P >
< / trung tâm >
< / thẻ sét>
< / mẫu>
thứ haiExample.js
liên quan đến máy tínhxử lýChủ đề ( sự kiện ) {
cái này . liên quan đến máy tính = cái này . bản mẫu . truy vấnSelector ( 'đầu vào sét' ) . giá trị ;
}
Toàn bộ mã:
Đầu ra:
Ví dụ 5:
Ở đây, chúng tôi sử dụng data-recid. Hãy tạo một nút có ba thẻ span có tên gọi là “Span1”, “Span2” và “Span3” trong tệp HTML. Chọn khoảng đầu tiên bằng cách chuyển “Span1” tới data-recid trong querySelector().
thứ baExample.html
< nhịp dữ liệu tái phạm = 'Khoảng1' > Tôi đang ở span-1 < / nhịp >< anh >
< nhịp dữ liệu tái phạm = 'Span2' > Tôi đang ở span-2 < / nhịp >< anh >
< nhịp dữ liệu tái phạm = 'Span3' > Tôi đang ở span-3 < / nhịp >< anh >
< / thẻ sét>
< / mẫu>
thứ baExample.js
nhận được chi tiết ( ) {// Lấy nội dung của Span1
bảng điều khiển. nhật ký ( cái này . bản mẫu . truy vấnSelector ( '[data-recid='Span1']' ) . văn bản bên trong ) ;
}
Toàn bộ mã:
Đầu ra:
Phần kết luận
Chúng ta đã học cách sử dụng querySelector() để truy cập các phần tử DOM. querySelector() đã sử dụng “this.template” để chọn các thành phần trong mẫu hiện tại. Có thể lưu trữ cái này trong một biến hoặc sử dụng nó trực tiếp. Cả hai đều được đề cập với các ví dụ. Ngoài ra, chúng tôi đã cung cấp một ví dụ bao gồm nhiều yếu tố. Trong trường hợp này, querySelector() trả về phần tử đầu tiên.