Trong các tình huống khác nhau, các lập trình viên cần lấy phần tử HTML theo thuộc tính name. Giả sử nhà phát triển muốn truy cập một điều khiển biểu mẫu, chẳng hạn như nút radio hoặc hộp kiểm, để đọc hoặc thao tác giá trị của nó. Cụ thể hơn, “ tên ” thuộc tính được sử dụng để nhóm các điều khiển biểu mẫu có liên quan và có thể cung cấp cùng một tên cho nhiều điều khiển, cho phép truy cập chúng dưới dạng một nhóm duy nhất.
Bài đăng này sẽ minh họa các phương pháp để truy xuất một phần tử HTML theo tên trong JavaScript.
Làm cách nào để lấy các phần tử theo tên trong JavaScript?
Trong JavaScript, bạn có thể truy cập một phần tử HTML bằng cách sử dụng thuộc tính tên của nó với sự trợ giúp của các phương thức JavaScript được xác định trước sau đây:
-
- Phương thức getElementsByName()
- phương thức querySelectorAll()
Phương pháp 1: Lấy phần tử theo tên bằng phương thức “getElementsByName()”
Để lấy phần tử HTML theo tên, hãy sử dụng “ getElementsByName() ' phương pháp. Phương thức này cung cấp một tập hợp các phần tử có thuộc tính tên được chỉ định.
cú pháp
Cú pháp sau đây được sử dụng cho phương thức getElementsByName():
tài liệu.getElementsByName ( 'tên' )
Ví dụ
Đầu tiên, tạo sáu nút. Năm người trong số họ có một “ tên ” thuộc tính được sử dụng để lấy phần tử HTML “ cái nút ”. Đính kèm sự kiện onclick với nút thứ sáu sẽ gọi “ áp dụngStyle() ” chức năng tạo kiểu cho năm nút:
< cái nút tên = 'btn' > Cái nút cái nút >< cái nút tên = 'btn' > Cái nút cái nút >
< cái nút tên = 'btn' > Cái nút cái nút >
< cái nút tên = 'btn' > Cái nút cái nút >
< cái nút tên = 'btn' > Cái nút cái nút > < anh >< anh >
< nút onclick = 'áp dụngStyle()' > Bấm vào đây cái nút >
Định nghĩa một chức năng “ áp dụngStyle() ” sẽ kích hoạt khi nhấp vào nút và thay đổi màu nền của tất cả các nút. Để làm điều này, trước tiên, hãy lấy tất cả “ cái nút ” thành một nhóm bằng cách gọi “ getElementsByName() ' phương pháp:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background= 'xanh chói' ;
} ) ;
}
Như bạn có thể thấy trong kết quả khi nhấp vào nút, màu nền của năm nút sẽ được thay đổi:
Phương pháp 2: Lấy phần tử theo tên bằng phương thức “querySelectorAll()”
Bạn cũng có thể sử dụng “ truy vấnSelectorAll() ” để lấy các phần tử bằng cách sử dụng “ tên ” thuộc tính trong JavaScript. Phương thức này được sử dụng để truy xuất tất cả các thành phần trong tài liệu khớp với bộ chọn/thuộc tính đã chỉ định, chẳng hạn như lớp CSS, id hoặc tên.
cú pháp
Cú pháp đã cho được sử dụng để lấy phần tử theo tên bằng cách sử dụng “ querySelectorAll()” phương pháp:
document.querySelectorAll ( '[tên='n1']' ) ;
Ví dụ
Trong ví dụ sau, chúng tôi sẽ chỉ thay đổi màu của những nút có tên là “ btn1 ”:
< div >< tên nút = 'btn' > Cái nút cái nút >
< tên nút = 'btn1' > Cái nút cái nút >
< tên nút = 'btn' > Cái nút cái nút >
< tên nút = 'btn1' > Cái nút cái nút >
< tên nút = 'btn' > Cái nút cái nút > < anh >< anh >
< nút onclick = 'áp dụngStyle()' > Bấm vào đây cái nút >
div >
Trong hàm đã xác định, chúng tôi sẽ gọi quyền truy cập đầu tiên tất cả các phần tử nút có tên là “ btn1 ” và sau đó áp dụng kiểu dáng cho nó:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background= 'xanh chói' ;
} ) ;
}
Đầu ra đã cho biểu thị rằng chỉ có hai nút đã thay đổi màu nền có tên là “btn1”:
Ghi chú: Nếu bạn muốn lấy một phần tử, bạn nên sử dụng document.querySelector thay vì document.querySelectorAll.
Phần kết luận
Để nhận hoặc truy xuất một phần tử theo tên, hãy sử dụng “ getElementsByName() ' hoặc là ' truy vấnSelectorAll() ” phương pháp. Phương thức được sử dụng phổ biến và hiệu quả nhất để lấy phần tử theo tên là phương thức “getElementsByName()”. Bài đăng này minh họa các phương pháp truy xuất phần tử HTML theo tên trong JavaScript.