Acessar a Propriedade do Título do Documento
Nesta etapa, você aprenderá como acessar a propriedade do título do documento usando JavaScript. Vamos construir sobre o arquivo HTML criado na etapa anterior e demonstrar como recuperar e manipular o título do documento.
Crie um novo arquivo chamado script.js no diretório ~/project usando o WebIDE. Adicione o seguinte código 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);
Agora, atualize o arquivo index.html para incluir o arquivo 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>
Ao abrir este arquivo HTML em um navegador, você verá os seguintes comportamentos:
Exemplo de saída no console do navegador:
Document Title: DOM Properties Exploration
Ao clicar no botão "Change Title" (Alterar Título):
New Document Title: Updated DOM Properties Lab
Conceitos-chave demonstrados:
- A propriedade
document.title recupera o título atual da página
- Você pode alterar dinamicamente o título do documento usando JavaScript
- O título aparece na aba do navegador e pode ser modificado em tempo de execução
