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

• Bùi Tấn Lực
• 897
• 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ờ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

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 *

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn