การทำงานกับ document.title ใน JavaScript

Property document.title ใช้ อ่าน และ ตั้งค่า Title ของเอกสาร (แสดงบน Browser Tab/Title Bar)

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>Demo Title</title>
  </head>
  <body>
    <script>
      // อ่าน Title
      var x = document.title;
      document.write("Our Title: " + x);
      
      // ตั้งค่า Title ใหม่ (Dynamic)
      document.title = "New Title - " + new Date().toLocaleTimeString();
    </script>
  </body>
</html>

คำอธิบาย

• Getter: document.title → คืนค่า String ปัจจุบัน
• Setter: document.title = "New Title" → อัปเดต Title ทันที
• รองรับ HTML Entities: document.title = "Tom & Jerry"

การใช้งานจริง

• Dynamic Title: แสดง Notification Count document.title = `(${count}) New Messages`
• SPA Routing: อัปเดต Title ตาม Route
• Page Visibility: เปลี่ยน Title เมื่อ Tab ไม่ Active document.title = "👋 Come back!"
• SEO: Server-side Render Title สำคัญกว่า Client-side

ตัวอย่าง: Title แจ้งเตือน

let originalTitle = document.title;
let blinkTimer;

function notify(count) {
  document.title = `(${count}) ${originalTitle}`;
  if (!blinkTimer) {
    blinkTimer = setInterval(() => {
      document.title = document.title === originalTitle ? `(${count}) ${originalTitle}` : originalTitle;
    }, 1000);
  }
}

function clearNotify() {
  clearInterval(blinkTimer);
  blinkTimer = null;
  document.title = originalTitle;
}