Truy xuất document.title trang web với JavaScript

JavaScript Examples | 12/06/2025 by Học Javascript

Trong lập trình web, tiêu đề (title) của trang web không chỉ xuất hiện trên tab trình duyệt mà còn ảnh hưởng đến trải nghiệm người dùng và SEO. JavaScript cung cấp một cách đơn giản để truy xuất và thay đổi tiêu đề trang web thông qua đối tượng document.title.
Bài tập này sẽ giúp bạn thực hành cách lấy tiêu đề hiện tại, thay đổi tiêu đề theo các sự kiện hoặc thời gian, đồng thời nâng cao kỹ năng thao tác với DOM bằng JavaScript.

Khái niệm về tiêu đề (title) của trang web bằng JavaScript

Tiêu đề (title) của trang web là đoạn văn bản ngắn hiển thị trên tab của trình duyệt, thường nằm ở phần đầu cửa sổ trình duyệt hoặc khi người dùng đánh dấu (bookmark) trang web.
Tiêu đề được khai báo trong cặp thẻ <title> nằm trong phần <head> của tài liệu HTML. Ví dụ:

<head>
  <title>Trang chủ - Công ty ABC</title>
</head>

Vai trò của tiêu đề trong trải nghiệm người dùng và SEO

Trải nghiệm người dùng (UX):
Tiêu đề giúp người dùng dễ dàng nhận biết nội dung hoặc mục đích của trang đang truy cập. Khi có nhiều tab mở cùng lúc, một tiêu đề rõ ràng và chính xác sẽ giúp người dùng nhanh chóng tìm đúng trang họ cần.
Tối ưu hóa công cụ tìm kiếm (SEO):
Các công cụ tìm kiếm như Google sử dụng tiêu đề trang để hiểu nội dung chính của trang. Một tiêu đề được tối ưu tốt sẽ giúp cải thiện thứ hạng trang web trên kết quả tìm kiếm, thu hút thêm lưu lượng truy cập.

Giới thiệu `document.title` trong JavaScript

Trong JavaScript, document.title là thuộc tính dùng để lấy hoặc gán giá trị cho tiêu đề của tài liệu HTML.
Truy xuất tiêu đề hiện tại: bạn có thể đọc tiêu đề hiện có bằng cách truy cập document.title.
Thay đổi tiêu đề: bạn có thể gán giá trị mới cho document.title để cập nhật tiêu đề của trang ngay lập tức mà không cần reload trang.

Ví dụ:

// Lấy tiêu đề hiện tại
console.log(document.title);

// Thay đổi tiêu đề
document.title = "Tiêu đề mới cho trang web";

Việc sử dụng document.title rất hữu ích trong các trường hợp như:

Thông báo cho người dùng khi có cập nhật mới trên trang.
Hiển thị số lượng tin nhắn chưa đọc (ví dụ: "(2) Tin nhắn mới - ChatApp").
Tạo hiệu ứng tiêu đề động trong các trang tương tác cao.

Cách truy xuất tiêu đề hiện tại bằng JavaScript

Cú pháp đơn giản

Trong JavaScript, để truy xuất và kiểm tra tiêu đề hiện tại của một trang web, bạn chỉ cần sử dụng thuộc tính document.title. Đây là cách thực hiện:

console.log(document.title);

Giải thích:

document đại diện cho toàn bộ tài liệu HTML đang được trình duyệt tải.
.title là thuộc tính cho phép lấy ra chuỗi văn bản bên trong thẻ <title>.
console.log() sẽ in ra giá trị đó trên bảng điều khiển (console) của trình duyệt, giúp bạn dễ dàng kiểm tra.

Ví dụ thực tế:

Giả sử trang web có đoạn mã HTML như sau:

<head>
  <title>Giới thiệu sản phẩm mới</title>
</head>

Khi bạn chạy đoạn JavaScript:

console.log(document.title);

Kết quả trong console sẽ là:

Giới thiệu sản phẩm mới

Việc truy xuất tiêu đề trang web bằng `document.title` có nhiều ứng dụng thực tiễn, ví dụ:

Kiểm tra tiêu đề đúng khi phát triển website:
Khi lập trình, bạn có thể kiểm tra xem tiêu đề đã đúng với nội dung trang chưa, tránh nhầm lẫn hoặc lỗi sai sót.
Phân tích hành vi người dùng:
Khi kết hợp với các công cụ theo dõi hành vi (analytics), bạn có thể ghi lại tiêu đề trang mà người dùng đang truy cập để phân loại dữ liệu chính xác hơn.
Hỗ trợ tự động hóa kiểm thử (automation testing):
Trong các bài test tự động, bạn có thể kiểm tra tiêu đề trang để xác nhận rằng trang đã được tải đúng nội dung.
Giao diện động:
Trong một số ứng dụng web hiện đại, tiêu đề có thể thay đổi dựa trên nội dung động (SPA – Single Page Application). Truy xuất tiêu đề giúp đảm bảo sự đồng bộ giữa nội dung và tiêu đề.

Cách thay đổi tiêu đề trang web bằng JavaScript

Gán giá trị mới

Trong JavaScript, việc thay đổi tiêu đề trang web rất đơn giản bằng cách gán một giá trị mới cho thuộc tính document.title. Cú pháp như sau:

document.title = "Tiêu đề mới";

Giải thích:

document.title không chỉ dùng để đọc mà còn để ghi giá trị.
Khi bạn gán một chuỗi mới, trình duyệt sẽ lập tức cập nhật tiêu đề của trang web theo nội dung mới.

Ví dụ: Thay đổi tiêu đề ngay sau khi tải trang

Giả sử trang HTML ban đầu có tiêu đề như sau:

<head>
  <title>Trang ban đầu</title>
</head>

Bạn có thể thêm đoạn JavaScript vào cuối trang (hoặc trong thẻ <head> với sự kiện DOMContentLoaded) để thay đổi tiêu đề ngay khi trang vừa tải:

Cách 1: Thay đổi trực tiếp

<script>
  document.title = "Chào mừng bạn đến với website!";
</script>

Ngay sau khi trình duyệt tải xong file HTML, tiêu đề trên tab trình duyệt sẽ đổi thành "Chào mừng bạn đến với website!".

Cách 2: Thay đổi sau khi trang hoàn tất tải (tốt hơn khi tài nguyên nhiều)

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.title = "Website đã sẵn sàng!";
  });
</script>

DOMContentLoaded đảm bảo rằng mọi phần tử HTML đã được tải xong trước khi thay đổi tiêu đề.
Phù hợp với các trang web có cấu trúc HTML phức tạp hoặc nội dung tải động.

Ví dụ:

let userName = "Minh";
document.title = `Xin chào, ${userName}!`;

Tiêu đề sẽ thành: "Xin chào, Minh!"

Các tình huống sử dụng thực tế bằng JavaScript

Việc thay đổi `document.title` không chỉ đơn giản là chỉnh sửa một dòng chữ, mà còn có thể được tận dụng để nâng cao trải nghiệm người dùng, tối ưu hóa giao tiếp, và làm cho website trở nên sinh động hơn. Dưới đây là những tình huống phổ biến:

Thông báo khi người dùng rời tab

Một cách sáng tạo để thu hút sự chú ý của người dùng khi họ chuyển sang tab khác:

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    document.title = "Bạn quên trang này rồi kìa!";
  } else {
    document.title = "Chào mừng bạn quay lại!";
  }
});

Khi người dùng rời tab, tiêu đề sẽ đổi thành lời nhắc.
Khi họ quay trở lại, tiêu đề sẽ đổi lại, tạo cảm giác gần gũi.

Ứng dụng: Phổ biến ở các website tin tức, giáo dục hoặc web bán hàng để giữ chân người dùng.

Hiển thị tiến trình tải nội dung

Trong quá trình trang web đang tải dữ liệu từ server hoặc API, có thể thay đổi tiêu đề để thông báo trạng thái:

document.title = "Đang tải bài viết...";
// Sau khi dữ liệu tải xong
document.title = "Bài viết - Trang chủ";

Tạo cảm giác chuyên nghiệp.
Người dùng biết rằng trang đang hoạt động, không bị đứng.

Cá nhân hóa theo người dùng hoặc nội dung

Tiêu đề có thể thay đổi tùy theo nội dung đang xem hoặc tên người dùng đã đăng nhập:

let username = "An";
document.title = `Trang của ${username}`;

Hoặc trong website nhiều chuyên mục:

let currentPage = "Tin Công Nghệ";
document.title = `${currentPage} | Báo Mới`;

Giúp người dùng xác định nhanh mình đang ở đâu.
Tăng tính cá nhân hóa trải nghiệm web.

Thay đổi tiêu đề theo sự kiện trong game/web app

Trong các ứng dụng như trò chơi, phần mềm học tập online,... khi trạng thái thay đổi (ví dụ như thắng, thua, đạt mốc mới), tiêu đề có thể được cập nhật:

function onGameOver() {
  document.title = "Bạn đã thua - Chơi lại nào!";
}

Ứng dụng: Làm cho web app trở nên sinh động và thú vị hơn.

Tối ưu SEO và chia sẻ mạng xã hội

Tiêu đề rất quan trọng trong việc:

Tối ưu hóa cho công cụ tìm kiếm (SEO).
Hiển thị đẹp khi chia sẻ lên Facebook, Zalo, Twitter.

Việc cập nhật tiêu đề động theo nội dung cụ thể sẽ giúp tăng tỷ lệ click khi người khác tìm kiếm hoặc chia sẻ trang web của bạn.

Ví dụ:

if (articleCategory === "Ẩm thực") {
  document.title = "Top món ăn ngon bạn không thể bỏ lỡ!";
}

Kết bài

Qua bài học này, chúng ta đã hiểu rõ cách sử dụng document.title trong JavaScript để truy xuất và thay đổi tiêu đề trang web một cách linh hoạt. Dù chỉ là một thao tác đơn giản, nhưng việc quản lý tiêu đề hiệu quả có thể góp phần quan trọng vào việc nâng cao trải nghiệm người dùng, tối ưu hóa SEO, và tăng tính tương tác cho website.
Việc vận dụng document.title sáng tạo trong các tình huống như thông báo, cá nhân hóa nội dung, hoặc phản hồi sự kiện sẽ giúp website của bạn trở nên chuyên nghiệp và thu hút hơn.
Hy vọng thông qua bài tập này, bạn đã nắm vững một công cụ nhỏ nhưng hữu ích, sẵn sàng áp dụng vào các dự án web thực tế trong tương lai.

Truy xuất document.title trang web với JavaScript

Khái niệm về tiêu đề (title) của trang web bằng JavaScript

Vai trò của tiêu đề trong trải nghiệm người dùng và SEO

Giới thiệu `document.title` trong JavaScript

Cách truy xuất tiêu đề hiện tại bằng JavaScript

Cú pháp đơn giản

Việc truy xuất tiêu đề trang web bằng `document.title` có nhiều ứng dụng thực tiễn, ví dụ:

Cách thay đổi tiêu đề trang web bằng JavaScript

Gán giá trị mới

Ví dụ: Thay đổi tiêu đề ngay sau khi tải trang

Các tình huống sử dụng thực tế bằng JavaScript

Thông báo khi người dùng rời tab

Hiển thị tiến trình tải nội dung

Cá nhân hóa theo người dùng hoặc nội dung

Thay đổi tiêu đề theo sự kiện trong game/web app

Tối ưu SEO và chia sẻ mạng xã hội

Kết bài

Bài viết liên quan

Hiển thị ngày và giờ hiện tại trong thẻ H1 bằng JavaScript DOM

Đếm số ký tự trong tiêu đề trang web bằng JavaScript

Thay đổi màu nền trang web bằng JavaScript

Hiển thị document.URL của trang web bằng JavaScript

Truy xuất document.title trang web với JavaScript

Khái niệm về tiêu đề (title) của trang web bằng JavaScript

Vai trò của tiêu đề trong trải nghiệm người dùng và SEO

Giới thiệu document.title trong JavaScript

Cách truy xuất tiêu đề hiện tại bằng JavaScript

Cú pháp đơn giản

Việc truy xuất tiêu đề trang web bằng document.title có nhiều ứng dụng thực tiễn, ví dụ:

Cách thay đổi tiêu đề trang web bằng JavaScript

Gán giá trị mới

Ví dụ: Thay đổi tiêu đề ngay sau khi tải trang

Các tình huống sử dụng thực tế bằng JavaScript

Thông báo khi người dùng rời tab

Hiển thị tiến trình tải nội dung

Cá nhân hóa theo người dùng hoặc nội dung

Thay đổi tiêu đề theo sự kiện trong game/web app

Tối ưu SEO và chia sẻ mạng xã hội

Kết bài

Bài viết liên quan

Hiển thị ngày và giờ hiện tại trong thẻ H1 bằng JavaScript DOM

Đếm số ký tự trong tiêu đề trang web bằng JavaScript

Thay đổi màu nền trang web bằng JavaScript

Hiển thị document.URL của trang web bằng JavaScript

Giới thiệu `document.title` trong JavaScript

Việc truy xuất tiêu đề trang web bằng `document.title` có nhiều ứng dụng thực tiễn, ví dụ: