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

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

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ẻ đó, chi tiết như nào hãy cùng chúng tôi phân tích:

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

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ử

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

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 *

Đăng ký tư vấn miễn phí

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