Phương thức getElementsByName() trong JavaScript

• Bùi Tấn Lực
• 937
• 18/09/2025

Chức năng của Phương thức getElementsByName() trong JavaScript

Phương thức getElementsByName() trong JavaScript dùng để lấy các phần tử HTML thông qua thuộc tính name, các phần tử sẽ được đưa vào một đối tượng NodeList, bạn có thể gọi các phần tử HTML ở trong NodeList đó để xử lý bằng các hành động cụ thể.

Cú pháp của Phương thức getElementsByName() trong JavaScript

let tenbien = document.getElementsByName("giatriname");

giatriname: Giá trị của thuộc tính name trong phần tử HTML.

tenbien: biến này là một đối tượng chứa một danh sách các phần tử HTML và các thông tin của từng phần tử HTML như: value, tagName, số lượng phần tử HTML,....

Code Phương thức getElementsByName() trong JavaScript

Phương thức getElementsByName() lấy thông tin trong JavaScript

Lấy giá trị của thuộc tính, tên thẻ:

<p>Họ Tên: <input name="thanhvien" type="text" value="Bùi Tấn Lực"></p>
<p>Họ Tên: <input name="thanhvien" type="text" value="Trần thị Vân"></p>
<p>Thành viên 1: <span id="thanhvien1"></span></p>
<p>Thành viên 2: <span id="thanhvien2"></span></p>
<p>Tên thẻ: <span id="tenthe"></span></p>
<p>Số lượng thành viên: <span id="soluong"></span></p>
<script>
let nodeList = document.getElementsByName("thanhvien");
// Lấy value
document.getElementById("thanhvien1").innerHTML = nodeList[0].value;
document.getElementById("thanhvien2").innerHTML = nodeList[1].value;
// Lấy tên thẻ
document.getElementById("tenthe").innerHTML = nodeList[0].tagName;
// Lấy số lượng thành viên
let soluong = document.getElementsByName("thanhvien").length;
document.getElementById("soluong").innerHTML = soluong;
</script>

Kết quả:

Thành viên 1: Bùi Tấn Lực

Thành viên 2: Trần thị Vân

Tên thẻ: INPUT

Số lượng thành viên: 2

Chạy Thử

Phương thức getElementsByName() for trong JavaScript

Dùng vòng lặp để kiểm tra giá trị:

<p>Bùi Tấn Lực:
<input name="thanhvien" type="checkbox" value="35"></p>
<p>Trần Thị Vân:
<input name="thanhvien" type="checkbox" value="29"></p>
<p>Bùi Đan Trúc Quỳnh:
<input name="thanhvien" type="checkbox" value="1"></p>

<p>Thành viên nào 35 tuổi:</p>

<script>
const collection = document.getElementsByName("thanhvien");
for (let i = 0; i < collection.length; i++) {
  if (collection[i].value == 35) {
    collection[i].checked = true;
  }
}
</script>

Chạy Thử

Lưu Ý Khi Sử Dụng getElementsByName() Trong JavaScript

Khi làm việc với các biểu mẫu hoặc nhóm phần tử có cùng thuộc tính name, getElementsByName() khá thuận tiện để lấy dữ liệu theo tên. Tuy nhiên, phương thức này có một số đặc điểm cần nắm rõ để tránh xử lý sai phần tử hoặc kết quả trả về.

getElementsByName() trả về gì khi không tìm thấy phần tử?

Nếu không có phần tử nào mang thuộc tính name tương ứng, getElementsByName() trả về một tập hợp rỗng. Vì vậy, đoạn mã vẫn có thể chạy bình thường nhưng sẽ không có phần tử để xử lý.

Trước khi truy cập một phần tử cụ thể, nên kiểm tra số lượng phần tử tìm được. Cách này đặc biệt hữu ích khi tên trường biểu mẫu có thể thay đổi hoặc phần tử được tạo động bằng JavaScript.

const items = document.getElementsByName("email");

if (items.length > 0) {
    console.log(items[0].value);
} else {
    console.log("Không tìm thấy phần tử");
}

Việc kiểm tra length giúp tránh giả định rằng phần tử luôn tồn tại, đồng thời làm cho mã dễ kiểm soát hơn khi giao diện thay đổi.

Cách xử lý nhiều phần tử có cùng thuộc tính name

Một tên có thể được sử dụng cho nhiều phần tử, chẳng hạn các lựa chọn trong nhóm radio hoặc nhiều trường nhập liệu có cùng mục đích. Vì vậy, không nên mặc định kết quả chỉ chứa một phần tử.

Có thể duyệt qua tập hợp nhận được để xử lý từng phần tử:

const options = document.getElementsByName("gender");

for (let i = 0; i < options.length; i++) {
    if (options[i].checked) {
        console.log(options[i].value);
    }
}

Với nhóm radio, cách này giúp xác định lựa chọn hiện tại mà không cần tìm từng phần tử riêng lẻ. Khi làm việc với nhiều phần tử, cần chú ý rằng chỉ số của phần tử bắt đầu từ 0.

Khi nào nên dùng getElementsByName() thay cho phương thức khác?

getElementsByName() phù hợp khi tiêu chí lựa chọn chính là thuộc tính name, đặc biệt trong các biểu mẫu có nhiều trường dùng chung một tên. Phương thức này cũng dễ hiểu khi cần lấy nhanh một nhóm phần tử theo tên.

Nếu cần biểu diễn điều kiện chọn phần tử phức tạp hơn, chẳng hạn kết hợp tên thẻ, class, thuộc tính hoặc nhiều điều kiện khác, có thể cân nhắc querySelector() hoặc querySelectorAll().

Do đó, lựa chọn phương thức không nên chỉ dựa vào việc phương thức nào ngắn hơn. Hãy chọn cách truy vấn phù hợp với cấu trúc HTML và mục đích xử lý để mã JavaScript dễ đọc, dễ bảo trì và ít phụ thuộc vào cấu trúc giao diện.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức getElementsByName() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức getElementsByName() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp