JS властивість Document.title
Загальний опис
Властивість title об'єкта Document відіграє ключову роль у веб-розробці, надаючи можливість отримати або встановити заголовок поточного документа. Заголовок документа є важливим елементом, який зазвичай відображається у вкладці браузера та є критичним для SEO (пошукової оптимізації), а також для забезпечення кращого користувацького досвіду, допомагаючи користувачам ідентифікувати зміст веб-сторінок у своїх закладках чи історії перегляду. Використання цієї властивості може бути особливо корисним у динамічних веб-додатках, де зміст сторінки оновлюється без перезавантаження, дозволяючи розробникам оновлювати заголовок, щоб він відповідав новому змісту.
Властивість title дозволяє легко отримати поточний заголовок документа за допомогою простого звернення:
console.log(document.title);
Цей код виведе поточний заголовок документа у консоль. Це може бути корисно для розробників, які хочуть зробити діагностику або аналіз заголовків сторінок під час виконання своїх скриптів.
Ще одним важливим аспектом є можливість встановлення нового заголовка для документа. Це можна зробити простим призначенням нового рядкового значення властивості title:
document.title = "Новий заголовок сторінки";
Після виконання цього коду заголовок вкладки браузера буде оновлено до "Новий заголовок сторінки", що дозволяє динамічно змінювати заголовок відповідно до змісту або контексту веб-додатку.
Розширене використання
У складніших веб-додатках, де зміст динамічно змінюється на основі взаємодії користувача або отриманих даних, властивість title може бути використана для відображення відповідних змін у заголовку. Наприклад, у веб-додатку для електронної комерції заголовок може бути оновлений, щоб відображати назву продукту, на який користувач дивиться в даний момент:
function updateTitleWithProductName(productName) {
document.title = `Перегляд продукту: ${productName}`;
}
Цей підхід допомагає підвищити залученість користувачів та оптимізувати сторінки для пошукових систем, оскільки вони можуть точніше індексувати зміст сторінки на основі її заголовка.
| Порада: | Заголовок сторінки, встановлений за допомогою |
| Порада: | Для веб-додатків, які підтримують мультимовність, динамічне оновлення |
| Порада: | При використанні фреймворків чи бібліотек для односторінкових застосунків (SPA), таких як React або Angular, можна використовувати |
Синтаксис
Document.titleЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому складнішому прикладі ми розглянемо, як можна використовувати document.title для динамічного оновлення заголовка веб-сторінки, відображаючи поточний час. Це може бути корисно для сторінок, які відображають таймер або мають інший зв'язок з часом.
function updateTitleWithTime() {
var currentDateTime = new Date(); // Отримуємо поточний час і дату
// Форматуємо час як годину і хвилини
var formattedTime = currentDateTime.getHours() + ":" + currentDateTime.getMinutes();
// Оновлюємо заголовок сторінки, включаючи поточний час
document.title = "Час зараз: " + formattedTime;
}
// Встановлюємо інтервал для оновлення заголовка кожну хвилину
setInterval(updateTitleWithTime, 60000);У цьому прикладі демонструється базове використання властивості document.title для зміни заголовка веб-сторінки. Заголовок сторінки відображається на вкладці браузера та є важливим елементом для користувацького досвіду, а також для SEO (пошукової оптимізації).
// Змінюємо заголовок сторінки
document.title = "Новий заголовок сторінки";