Получить доступ к свойству заголовка документа
В этом шаге вы узнаете, как получить доступ к свойству заголовка документа с использованием JavaScript. Мы будем основываться на HTML-файле, созданном на предыдущем шаге, и покажем, как получить и манипулировать заголовком документа.
Создайте новый файл с именем script.js в каталоге ~/project с использованием WebIDE. Добавьте следующий JavaScript-код:
// Access the document title
console.log("Document Title:", document.title);
// Modify the document title
function changeTitle() {
document.title = "Updated DOM Properties Lab";
console.log("New Document Title:", document.title);
}
// Add a button to demonstrate title change
const button = document.createElement("button");
button.textContent = "Change Title";
button.onclick = changeTitle;
document.body.appendChild(button);
Теперь обновите файл index.html, чтобы включить JavaScript-файл:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>DOM Properties Exploration</title>
</head>
<body>
<h1>Welcome to DOM Properties Lab</h1>
<p>This page will help us explore JavaScript DOM properties.</p>
<img src="https://example.com/sample-image.jpg" alt="Sample Image" />
<img src="https://example.com/another-image.jpg" alt="Another Image" />
<script src="script.js"></script>
</body>
</html>
При открытии этого HTML-файла в браузере вы увидите следующие действия:
Пример вывода в консоли браузера:
Document Title: DOM Properties Exploration
При нажатии кнопки "Change Title":
New Document Title: Updated DOM Properties Lab
Показанные ключевые концепции:
- Свойство
document.title возвращает текущий заголовок страницы
- Вы можете динамически изменить заголовок документа с использованием JavaScript
- Заголовок отображается в вкладке браузера и может быть изменен во время выполнения
