Đếm số lượng thẻ trên trang web bằng JavaScript

Javascript căn bản | 15/06/2025 by Học Javascript

Trong các trang web, thẻ <a> (anchor) là một trong những phần tử HTML được sử dụng phổ biến nhất để tạo các liên kết, giúp người dùng điều hướng tới các trang khác hoặc các vị trí cụ thể trong cùng một trang. Việc đếm số lượng thẻ <a> trên một trang web không chỉ mang ý nghĩa thống kê mà còn hữu ích trong việc kiểm tra chất lượng nội dung, tối ưu SEO, hoặc kiểm thử giao diện người dùng.

Với JavaScript – ngôn ngữ lập trình phía client mạnh mẽ – ta có thể dễ dàng truy cập và thao tác với các phần tử HTML như thẻ <a> thông qua DOM (Document Object Model). Bài tập này sẽ giúp bạn làm quen với cách sử dụng JavaScript để đếm số lượng các thẻ <a> trên trang web, đồng thời rèn luyện khả năng thao tác với tập hợp phần tử và hiển thị kết quả một cách linh hoạt.

Yêu cầu bài tập đếm số lượng thẻ <a> trên trang web bằng JavaScript

Trong bài tập này, học viên cần thực hiện các yêu cầu cụ thể như sau:

Sử dụng JavaScript để lấy danh sách tất cả các thẻ <a> có trên trang web:

Truy cập vào tài liệu HTML thông qua đối tượng document.
Sử dụng các phương thức truy vấn phần tử như document.getElementsByTagName("a") hoặc document.querySelectorAll("a") để thu được tập hợp tất cả các thẻ <a> hiện có trong trang.

Tính tổng số lượng thẻ <a>:

Sử dụng thuộc tính .length để đếm số phần tử có trong danh sách vừa thu được.
Giá trị trả về sẽ là một số nguyên đại diện cho số lượng liên kết hiện diện trên trang web.

Hiển thị số lượng thẻ <a>:

Có thể lựa chọn hiển thị kết quả bằng một trong hai cách:
- Hiển thị trên bảng điều khiển (console): Sử dụng console.log() để in ra số lượng thẻ <a>, phù hợp cho việc kiểm tra và debug trong quá trình phát triển.
- Hiển thị trên giao diện người dùng: Sử dụng JavaScript để cập nhật nội dung của một thẻ HTML nào đó (ví dụ như <p id="result">) nhằm hiển thị số lượng thẻ <a> một cách trực quan với người dùng.

Các bước hướng dẫn đếm số lượng thẻ <a> trên trang web bằng JavaScript

Tạo file HTML cơ bản

Tạo một file HTML với tên tùy ý (ví dụ: index.html).
Bên trong phần <body>, thêm một vài thẻ <a> để tạo liên kết giả lập và một thẻ HTML để hiển thị kết quả (ví dụ: thẻ <p id="result">).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Đếm thẻ a</title>
</head>
<body>
  <a href="#">Trang chủ</a>
  <a href="#">Giới thiệu</a>
  <a href="#">Liên hệ</a>

  <p id="result"></p>

  <script src="script.js"></script>
</body>
</html>

Viết JavaScript để lấy danh sách thẻ `<a>`:

Tạo file JavaScript riêng (ví dụ: script.js) hoặc viết trực tiếp trong thẻ <script>.
Sử dụng phương thức document.getElementsByTagName("a") hoặc document.querySelectorAll("a") để lấy danh sách các thẻ <a>.

const links = document.getElementsByTagName("a"); // hoặc document.querySelectorAll("a")

Đếm số lượng thẻ `<a>`:

Sử dụng .length để lấy số lượng phần tử trong danh sách.

const totalLinks = links.length;

Hiển thị kết quả:

Cách 1: Hiển thị trong console:

console.log("Số lượng thẻ <a> là: " + totalLinks);

Cách 2: Hiển thị trên giao diện:

document.getElementById("result").innerText = "Số lượng thẻ <a> trên trang là: " + totalLinks;

Gợi ý cách triển khai đếm số lượng thẻ <a> trên trang web bằng JavaScript

Dưới đây là phần hướng dẫn chi tiết giúp học viên triển khai bài tập một cách có tổ chức, dễ hiểu và có thể mở rộng.

Gợi ý đoạn mã HTML mẫu

Tạo một file HTML đơn giản chứa một vài thẻ <a> và một phần tử để hiển thị kết quả:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Đếm số lượng thẻ &lt;a&gt;</title>
</head>
<body>
  <h1>Liên kết trong trang</h1>

  <a href="https://example.com">Trang chủ</a><br>
  <a href="https://example.com/about">Giới thiệu</a><br>
  <a href="https://example.com/contact">Liên hệ</a><br>

  <p id="result">Kết quả sẽ hiển thị ở đây</p>

  <script src="script.js"></script>
</body>
</html>

Gợi ý đoạn JavaScript để đếm số lượng thẻ <a>

Bạn có thể đặt đoạn mã này vào file script.js:

function countAnchorTags() {
  // Lấy danh sách các thẻ <a>
  const anchors = document.getElementsByTagName("a");

  // Kiểm tra nếu không có thẻ <a>
  if (anchors.length === 0) {
    console.log("Không có thẻ <a> nào trong trang.");
    document.getElementById("result").innerText = "Không có thẻ <a> nào.";
    return;
  }

  // Nếu có, in ra số lượng
  console.log("Số lượng thẻ <a>: " + anchors.length);
  document.getElementById("result").innerText = "Có " + anchors.length + " thẻ <a> trong trang.";
}

// Gọi hàm khi trang đã tải xong
window.onload = countAnchorTags;

Gợi ý tách logic thành hàm

Việc tách logic ra thành hàm giúp mã nguồn gọn gàng hơn và có thể tái sử dụng trong các trường hợp khác (ví dụ, sau khi thêm mới thẻ <a> bằng JavaScript).

Ví dụ:

function getAllAnchors() {
  return document.getElementsByTagName("a");
}

function displayAnchorCount() {
  const anchors = getAllAnchors();
  const count = anchors.length;

  const result = count > 0
    ? `Có ${count} thẻ <a> trong trang.`
    : "Không có thẻ <a> nào.";

  console.log(result);
  document.getElementById("result").innerText = result;
}

window.onload = displayAnchorCount;

Mở rộng đếm số lượng thẻ <a> trên trang web bằng JavaScript

Để tăng tính linh hoạt và rèn luyện tư duy nâng cao, bạn có thể triển khai thêm các tính năng sau trong bài tập đếm thẻ <a> bằng JavaScript:

Đếm các thẻ <a> theo điều kiện

Chứa từ khóa trong href (ví dụ: "example"):

function countAnchorsByKeyword(keyword) {
  const anchors = document.querySelectorAll("a");
  const filtered = Array.from(anchors).filter(a => a.href.includes(keyword));
  return filtered.length;
}

console.log("Số thẻ <a> chứa từ 'example':", countAnchorsByKeyword("example"));

Có class cụ thể (ví dụ: class="external"):

const externalAnchors = document.querySelectorAll("a.external");
console.log("Số thẻ <a> có class 'external':", externalAnchors.length);

Thống kê số thẻ <a> trỏ ra ngoài hoặc nội bộ

Liên kết nội bộ: chứa URL bắt đầu bằng dấu # hoặc cùng domain.
Liên kết ngoài: trỏ sang domain khác.

function categorizeLinks() {
  const anchors = document.querySelectorAll("a");
  let internal = 0;
  let external = 0;

  anchors.forEach(a => {
    const href = a.getAttribute("href");
    if (href.startsWith("#") || href.startsWith(window.location.origin)) {
      internal++;
    } else if (href.startsWith("http")) {
      external++;
    }
  });

  console.log("Liên kết nội bộ:", internal);
  console.log("Liên kết ngoài:", external);
}
categorizeLinks();

Hiển thị danh sách các liên kết

Bạn có thể liệt kê tất cả các liên kết ra giao diện dưới dạng danh sách:

function showAllLinks() {
  const anchors = document.querySelectorAll("a");
  const listContainer = document.createElement("ul");

  anchors.forEach(a => {
    const li = document.createElement("li");
    li.textContent = a.href;
    listContainer.appendChild(li);
  });

  document.body.appendChild(listContainer);
}
showAllLinks();

Kết bài

Thông qua bài tập đếm số lượng thẻ <a> trên trang web bằng JavaScript, người học không chỉ nắm vững cách sử dụng các phương thức DOM cơ bản như getElementsByTagName hay querySelectorAll, mà còn rèn luyện khả năng thao tác với tập hợp các phần tử HTML. Việc hiển thị kết quả ra console hoặc giao diện giúp hiểu rõ hơn về quá trình tương tác giữa mã JavaScript và cấu trúc trang web. Ngoài ra, các phần mở rộng như lọc theo điều kiện, phân loại liên kết nội bộ và bên ngoài, hay hiển thị danh sách liên kết giúp tăng tính thực tiễn, đồng thời mở ra nhiều hướng ứng dụng khác trong lập trình web. Đây là một bài tập đơn giản nhưng hiệu quả trong việc xây dựng nền tảng tư duy xử lý DOM bằng JavaScript.