Propriedades DOM em JavaScript: Aprenda a Manipular Documentos

Introdução

Neste laboratório, os participantes explorarão as propriedades do Document Object Model (DOM) em JavaScript, criando um documento HTML interativo e usando JavaScript para acessar e manipular vários atributos do documento. O laboratório oferece uma abordagem prática para entender as principais propriedades do DOM, como o título do documento, URL, links, imagens e conteúdo do corpo.

Através de um processo passo a passo, os alunos primeiro criarão uma estrutura HTML básica e, em seguida, usarão progressivamente JavaScript para interagir com diferentes propriedades do documento. Ao examinar métodos como acessar o título do documento, recuperar URLs e links, contar imagens e explorar as propriedades do corpo do documento e cookies, os participantes obterão insights práticos sobre como o JavaScript pode interagir dinamicamente com elementos e metadados de páginas da web.

Criar Documento HTML com Estrutura Básica

Nesta etapa, você aprenderá como criar um documento HTML básico que servirá como base para explorar as propriedades do DOM em JavaScript. Usaremos o WebIDE para criar um arquivo HTML com uma estrutura simples que inclui elementos essenciais.

Primeiro, navegue até o diretório ~/project no WebIDE. Crie um novo arquivo chamado index.html clicando com o botão direito no explorador de arquivos e selecionando "New File" (Novo Arquivo).

Copie e cole o seguinte código HTML no arquivo index.html:

<!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" />
  </body>
</html>

Vamos detalhar os componentes-chave deste documento HTML:

<!DOCTYPE html> declara este como um documento HTML5
<html lang="en"> define o idioma do documento
<head> contém metadados sobre o documento
<title> define o título da página, que usaremos em etapas posteriores
<body> contém o conteúdo visível da página
Incluímos duas tags <img> para demonstrar propriedades do DOM relacionadas a imagens em etapas subsequentes

Exemplo de saída ao abrir este arquivo em um navegador:

[Uma página da web com o título "DOM Properties Exploration"
 exibindo "Welcome to DOM Properties Lab"
 e "This page will help us explore JavaScript DOM properties."]

Esta estrutura HTML simples fornece o ponto de partida perfeito para o nosso laboratório de exploração de propriedades do DOM.

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

Recuperar URL e Links do Documento

Nesta etapa, você aprenderá como acessar a URL do documento e recuperar informações sobre links usando as propriedades do DOM em JavaScript. Vamos atualizar o arquivo script.js para demonstrar essas capacidades.

Abra o arquivo script.js no WebIDE e adicione o seguinte código:

// Retrieve and display the current document URL
console.log("Current Document URL:", document.URL);

// Get the number of links on the page
const linkCount = document.links.length;
console.log("Total Number of Links:", linkCount);

// Display information about all links
function displayLinkInfo() {
  const links = document.links;
  console.log("Link Information:");
  for (let i = 0; i < links.length; i++) {
    console.log(`Link ${i + 1}:`);
    console.log(`  Href: ${links[i].href}`);
    console.log(`  Text: ${links[i].text}`);
  }
}

// Add a button to show link information
const linkButton = document.createElement("button");
linkButton.textContent = "Show Link Details";
linkButton.onclick = displayLinkInfo;
document.body.appendChild(linkButton);

Atualize o arquivo index.html para incluir alguns links adicionais:

<!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>

    <div>
      <a href="https://example.com">Example Website</a>
      <a href="https://labex.io">LabEx Learning Platform</a>
    </div>

    <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>

Exemplo de saída no console do navegador:

Current Document URL: file:///home/labex/project/index.html
Total Number of Links: 2

Link Information:
Link 1:
  Href: https://example.com
  Text: Example Website
Link 2:
  Href: https://labex.io
  Text: LabEx Learning Platform

Conceitos-chave demonstrados:

document.URL recupera a URL completa do documento atual
document.links fornece uma coleção de todos os links na página
Você pode iterar pelos links e acessar suas propriedades como href e text

Contar e Exibir Imagens na Página

Nesta etapa, você aprenderá como contar e exibir informações sobre imagens em uma página da web usando as propriedades do DOM em JavaScript. Vamos atualizar o arquivo script.js para explorar a funcionalidade relacionada a imagens.

Abra o arquivo script.js no WebIDE e adicione o seguinte código:

// Count the number of images on the page
const imageCount = document.images.length;
console.log("Total Number of Images:", imageCount);

// Function to display image details
function displayImageInfo() {
  const images = document.images;
  console.log("Image Information:");
  for (let i = 0; i < images.length; i++) {
    console.log(`Image ${i + 1}:`);
    console.log(`  Source: ${images[i].src}`);
    console.log(`  Alt Text: ${images[i].alt}`);
  }
}

// Create a button to show image details
const imageButton = document.createElement("button");
imageButton.textContent = "Show Image Details";
imageButton.onclick = displayImageInfo;
document.body.appendChild(imageButton);

// Add a simple image information display area
const infoDiv = document.createElement("div");
infoDiv.id = "image-info";
document.body.appendChild(infoDiv);

// Update the div with image count
infoDiv.textContent = `Number of Images: ${imageCount}`;

Atualize o arquivo index.html para incluir mais imagens com diferentes atributos:

<!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>

    <div>
      <a href="https://example.com">Example Website</a>
      <a href="https://labex.io">LabEx Learning Platform</a>
    </div>

    <div id="image-container">
      <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
      <img src="https://example.com/another-image.jpg" alt="Another Image" />
      <img src="https://example.com/third-image.png" alt="Third Image" />
    </div>

    <script src="script.js"></script>
  </body>
</html>

Exemplo de saída no console do navegador:

Total Number of Images: 3
Image Information:
Image 1:
  Source: https://example.com/sample-image.jpg
  Alt Text: Sample Image
Image 2:
  Source: https://example.com/another-image.jpg
  Alt Text: Another Image
Image 3:
  Source: https://example.com/third-image.png
  Alt Text: Third Image

Conceitos-chave demonstrados:

document.images fornece uma coleção de todas as imagens na página
Você pode acessar propriedades da imagem como src e alt
Crie e manipule dinamicamente elementos da página usando JavaScript

Demonstrar Propriedades do Corpo do Documento e Cookies

Nesta etapa, você explorará as propriedades do corpo do documento e cookies em JavaScript, aprendendo como manipular o conteúdo da página e trabalhar com cookies do navegador.

Abra o arquivo script.js no WebIDE e adicione o seguinte código:

// Demonstrate document body manipulation
function modifyBodyContent() {
  // Access and modify document body
  const body = document.body;
  console.log("Original Body Inner HTML:", body.innerHTML);

  // Create a new paragraph element
  const newParagraph = document.createElement("p");
  newParagraph.textContent =
    "This paragraph was dynamically added to the body!";
  body.appendChild(newParagraph);

  console.log("Updated Body Inner HTML:", body.innerHTML);
}

// Demonstrate cookie properties
function manageCookies() {
  // Set a new cookie
  document.cookie =
    "labExperience=JavaScript DOM; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

  // Display all cookies
  console.log("Current Cookies:", document.cookie);

  // Create a button to show cookies
  const cookieButton = document.createElement("button");
  cookieButton.textContent = "Show Cookies";
  cookieButton.onclick = () => {
    alert(`Cookies: ${document.cookie}`);
  };
  document.body.appendChild(cookieButton);
}

// Create buttons to trigger demonstrations
const bodyButton = document.createElement("button");
bodyButton.textContent = "Modify Body Content";
bodyButton.onclick = modifyBodyContent;
document.body.appendChild(bodyButton);

const cookieButton = document.createElement("button");
cookieButton.textContent = "Manage Cookies";
cookieButton.onclick = manageCookies;
document.body.appendChild(cookieButton);

Atualize o arquivo index.html para garantir a compatibilidade:

<!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>

    <div>
      <a href="https://example.com">Example Website</a>
      <a href="https://labex.io">LabEx Learning Platform</a>
    </div>

    <div id="image-container">
      <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
      <img src="https://example.com/another-image.jpg" alt="Another Image" />
      <img src="https://example.com/third-image.png" alt="Third Image" />
    </div>

    <script src="script.js"></script>
  </body>
</html>

Exemplo de saída no console do navegador:

// After clicking "Modify Body Content"
Original Body Inner HTML: [initial HTML content]
Updated Body Inner HTML: [HTML content with new paragraph added]

// After clicking "Manage Cookies"
Current Cookies: labExperience=JavaScript DOM

Conceitos-chave demonstrados:

Acessando e modificando document.body
Criando e anexando novos elementos dinamicamente
Definindo e lendo cookies do navegador
Interagindo com as propriedades do documento usando JavaScript

Resumo

Neste laboratório, os participantes aprendem a explorar as propriedades do Document Object Model (DOM) usando JavaScript, criando um documento HTML estruturado e implementando várias técnicas de acesso a propriedades. O laboratório começa com a construção de um arquivo HTML básico que inclui elementos essenciais como título, corpo e imagens, servindo como base para a compreensão das interações do DOM.

O exercício prático guia os alunos através do acesso a diferentes propriedades do documento, como título, URL, links e contagem de imagens, demonstrando como o JavaScript pode recuperar e manipular dinamicamente metadados de páginas da web. Ao trabalhar nestas etapas, os participantes ganham experiência prática em examinar e interagir com propriedades fundamentais do DOM, aprimorando sua compreensão das técnicas de desenvolvimento web do lado do cliente.

Explore as Propriedades do DOM em JavaScript

Introdução

Criar Documento HTML com Estrutura Básica

Acessar a Propriedade do Título do Documento

Recuperar URL e Links do Documento

Contar e Exibir Imagens na Página

Demonstrar Propriedades do Corpo do Documento e Cookies

Resumo