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

• Bùi Tấn Lực
• 944
• 14/09/2025

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

Phương thức getElementsByTagName() trong JavaScript dùng để lấy tên thẻ HTML rồi thực hiện nhiều hành động vào thẻ đó, ngoài ra còn có thể đếm có bao nhiêu thẻ.

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

const danhsach = tenbiencha.getElementsByTagName('tenthe');

tenbiencha: Tên biến cha là phần tử HTML chứa các phần tử con cần tác động, thường dùng document.getElementById("giá trị id") để lấy.

tenthe: Tên thẻ HTML (Ví dụ: li, p,....)

danhsach: Trả kết quả một danh sách các phần tử con.

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

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

Dùng vòng lặp for để duyệt của các phần tử HTML nằm trong một ID và lấy ra nội dung, thuộc tính của các phần tử HTML đó:

const list = divid.getElementsByTagName('p');

<div id="divid">
    <p data-id="1">Tiêu đề 1</p>
    <p data-id="2">Tiêu đề 2</p>
    <p data-id="3">Tiêu đề 3</p>
    <p data-id="4">Tiêu đề 4</p>
    <p data-id="5">Tiêu đề 5</p>
</div>
<script>
  document.write("<b>Kết quả:</b><br>");	
  // Lấy id của divid
  const divid = document.getElementById("divid");
  // Lấy danh sách thẻ p nằm trong id divid
  const list = divid.getElementsByTagName('p');
  // Lặp qua các thẻ p nằm trong id divid
  for (let i = 0; i < list.length; i++) {
  // Lấy nội dung và giá trị của thuộc tính data-id trong thẻ p nằm trong id divid
  document.write("Nội dung: "+list[i].innerText+", data-id: "+list[i].getAttribute('data-id')+"<br>");
  }
</script>

Kết quả:

Tiêu đề 1

Tiêu đề 2

Tiêu đề 3

Tiêu đề 4

Tiêu đề 5

Kết quả:
Nội dung: Tiêu đề 1, data-id: 1
Nội dung: Tiêu đề 2, data-id: 2
Nội dung: Tiêu đề 3, data-id: 3
Nội dung: Tiêu đề 4, data-id: 4
Nội dung: Tiêu đề 5, data-id: 5

Chạy Thử

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

Tạo nội dung cho từng phần tủ HTML, tạo giá trị cho từng thuộc tính của phần tử HTML, những phần tử HTML đó nằm trong một phần tử HTML khác có ID hoặc nằm trong document (body):

<div id="divid">
    <p>Tiêu đề 1</p>
    <p>Tiêu đề 2</p>
    <p>Tiêu đề 3</p>
    <p>Tiêu đề 4</p>
    <p>Tiêu đề 5</p>
</div>
<script>
  document.write("<b>Kết quả:</b><br>");	
  // Lấy id của divid
  const divid = document.getElementById("divid");
  // Lấy danh sách thẻ p nằm trong thẻ div có id divid
  const list = divid.getElementsByTagName('p');
  // Lặp qua các thẻ p nằm trong thẻ div có id divid
  for (let i = 0; i < list.length; i++) {
  // Tạo nội dung cho từng thẻ p nằm trong thẻ div có id divid
  list[i].innerText = "Tiêu đề mới "+i;
  // Tạo giá trị cho từng thuộc tính data-id cho từng thẻ p nằm trong thẻ div có id divid
  list[i].setAttribute("data-id","thep"+i);
  // Lấy nội dung và giá trị của thuộc tính data-id trong mỗi thẻ p nằm trong thẻ div có id divid
  document.write("Nội dung: "+list[i].innerText+", data-id: "+list[i].getAttribute('data-id')+"<br>");
  }
</script>

Kết quả:

Tiêu đề mới 0

Tiêu đề mới 1

Tiêu đề mới 2

Tiêu đề mới 3

Tiêu đề mới 4

Kết quả:
Nội dung: Tiêu đề mới 0, data-id: thep0
Nội dung: Tiêu đề mới 1, data-id: thep1
Nội dung: Tiêu đề mới 2, data-id: thep2
Nội dung: Tiêu đề mới 3, data-id: thep3
Nội dung: Tiêu đề mới 4, data-id: thep4

Chạy Thử

Phương thức getElementsByTagName() đếm phần tử trong JavaScript

Đếm số phần tử con có trong phần tử cha bằng cách lấy tên thẻ:

<ul id="ulid">
	<li>Trang chủ</li>
    <li>Giới thiệu</li>
    <li>Hosting</li>
    <li>Blog</li>
    <li>Liên hệ</li>
</ul>
<p>Số thẻ li: <span id="sotheli" ></span></p>
<script>
// Lấy id ulid của thử ul
const ulid = document.getElementById("ulid");
// Lấy các thẻ li trong ulid
const nodes = ulid.getElementsByTagName("li");
// Đếm có bao nhiêu thẻ li trong ulid
document.getElementById("sotheli").innerHTML = nodes.length;
</script>

Kết quả:

Trang chủ
Giới thiệu
Hosting
Blog
Liên hệ
Số thẻ li: 5

Chạy Thử

Phương thức getElementsByTagName() đổi nội dung trong JavaScript

Đổi nội dung trong thẻ li:

<ul >
	<li>Home</li>
    <li>Giới thiệu</li>
    <li>Hosting</li>
    <li>Blog</li>
    <li>Liên hệ</li>
</ul>
<p>Click vào nút ĐỔI NỘI DUNG để thay đổi nội dung li đầu tiên</p>
<button onclick="doiNoiDung()">ĐỔI NỘI DUNG</button>
<script>
function doiNoiDung() {
  // Lấy tên thẻ UL đầu tiên
  const list = document.getElementsByTagName("UL")[0];
  // Thay đổi nội dung li ở vị trí đầu tiên thành Trang chủ
  list.getElementsByTagName("li")[0].innerHTML = "Trang chủ";
}
</script>

Chạy Thử

Phương thức getElementsByTagName() css phần tử trong JavaScript

<div id="divid">
	<p>Hàng 1</p>
    <p>Hàng 2</p>
    <p>Hàng 3</p>
    <p>Hàng 4</p>
    <p>Hàng 5</p>
</div>
<p>Click vào nút ĐỔI CSS để thay đổi css cho thẻ p ở vị trí 1 (hàng 2)</p>
<button onclick="doiCss()">ĐỔI CSS</button>
<script>
function doiCss() {
   const divid = document.getElementById("divid");
   divid.getElementsByTagName("p")[1].style.color = "red";
}
</script>

Chạy Thử

Cách sử dụng getElementsByTagName() hiệu quả trong JavaScript

getElementsByTagName() phát huy tác dụng khi cần làm việc với nhiều phần tử có cùng tên thẻ trong một khu vực HTML. Thay vì tìm từng phần tử riêng lẻ, bạn có thể lấy cả tập hợp rồi xử lý theo nhu cầu.

Lấy phần tử theo vị trí với getElementsByTagName()

Kết quả trả về có thể truy cập theo chỉ số, bắt đầu từ 0. Cách này phù hợp khi bạn biết phần tử cần thao tác nằm ở vị trí nào trong danh sách.

const items = document.getElementsByTagName("li");

console.log(items[0]);
console.log(items[1]);

Ví dụ trên lần lượt lấy phần tử li đầu tiên và thứ hai trong phạm vi được tìm kiếm. Nếu chỉ số không tồn tại, kết quả sẽ là undefined, vì vậy nên kiểm tra số lượng phần tử trước khi truy cập khi dữ liệu có thể thay đổi.

Lặp qua nhiều phần tử bằng getElementsByTagName()

Khi cần áp dụng cùng một thao tác cho nhiều phần tử, có thể duyệt qua tập hợp bằng vòng lặp. Đây là cách sử dụng phổ biến khi danh sách được tạo từ nhiều thẻ giống nhau.

const headings = document.getElementsByTagName("h3");

for (let i = 0; i < headings.length; i++) {
    console.log(headings[i].textContent);
}

Thuộc tính length cho biết số lượng phần tử hiện có trong tập hợp. Trong quá trình lặp, từng phần tử được truy cập thông qua chỉ số tương ứng.

Sử dụng getElementsByTagName() trong một phần tử HTML cụ thể

Không nhất thiết phải tìm trên toàn bộ tài liệu. Bạn có thể gọi phương thức trên một phần tử đã xác định để giới hạn phạm vi tìm kiếm, giúp thao tác đúng khu vực cần xử lý.

const box = document.getElementById("content");
const links = box.getElementsByTagName("a");

console.log(links.length);

Trong trường hợp này, chỉ các thẻ a nằm bên trong phần tử có id là content mới được đưa vào kết quả. Cách giới hạn phạm vi này đặc biệt hữu ích khi trang có nhiều khu vực chứa cùng loại thẻ.

Thay đổi nội dung hoặc thuộc tính của các phần tử được chọn

Sau khi lấy được tập hợp phần tử, bạn có thể tiếp tục thay đổi nội dung hoặc thuộc tính của từng phần tử. Điều quan trọng là phải truy cập đúng phần tử trước khi thực hiện thao tác.

const links = document.getElementsByTagName("a");

for (let i = 0; i < links.length; i++) {
    links[i].textContent = "Xem chi tiết";
    links[i].setAttribute("title", "Thông tin chi tiết");
}

Đoạn mã trên cập nhật nội dung và thuộc tính title cho toàn bộ các liên kết được tìm thấy. Với những trang có số lượng phần tử lớn, nên giới hạn phạm vi tìm kiếm và chỉ xử lý những phần tử thực sự cần thiết.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức getElementsByTagName() 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 getElementsByTagName() 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