Explora las propiedades del DOM en JavaScript

Introducción

En este laboratorio, los participantes explorarán las propiedades del Modelo de Objetos del Documento (DOM) en JavaScript al crear un documento HTML interactivo y utilizar JavaScript para acceder y manipular varios atributos del documento. El laboratorio ofrece un enfoque práctico para comprender propiedades clave del DOM, como el título del documento, la URL, los enlaces, las imágenes y el contenido del cuerpo.

A través de un proceso paso a paso, los aprendices primero crearán una estructura HTML básica y luego utilizarán progresivamente JavaScript para interactuar con diferentes propiedades del documento. Al examinar métodos como acceder al título del documento, recuperar URLs y enlaces, contar imágenes y explorar las propiedades del cuerpo del documento y las cookies, los participantes adquirirán conocimientos prácticos sobre cómo JavaScript puede interactuar dinámicamente con los elementos y metadatos de una página web.

Crea un documento HTML con estructura básica

En este paso, aprenderás a crear un documento HTML básico que servirá como base para explorar las propiedades del DOM en JavaScript. Usaremos el WebIDE para crear un archivo HTML con una estructura simple que incluye elementos esenciales.

Primero, navega hasta el directorio ~/project en el WebIDE. Crea un nuevo archivo llamado index.html haciendo clic derecho en el explorador de archivos y seleccionando "Nuevo archivo".

Copia y pega el siguiente código HTML en el archivo 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>

Analicemos los componentes clave de este documento HTML:

<!DOCTYPE html> declara que este es un documento HTML5
<html lang="en"> establece el idioma del documento
<head> contiene metadatos sobre el documento
<title> establece el título de la página, que usaremos en pasos posteriores
<body> contiene el contenido visible de la página
Hemos incluido dos etiquetas <img> para demostrar propiedades del DOM relacionadas con imágenes en pasos subsiguientes

Salida de ejemplo cuando abres este archivo en un navegador:

[Una página web con el título "DOM Properties Exploration"
 mostrando "Welcome to DOM Properties Lab"
 y "This page will help us explore JavaScript DOM properties."]

Esta estructura HTML simple proporciona el punto de partida perfecto para nuestro laboratorio de exploración de propiedades del DOM.

Accede a la propiedad del título del documento

En este paso, aprenderás a acceder a la propiedad del título del documento utilizando JavaScript. Construiremos sobre el archivo HTML creado en el paso anterior y demostraremos cómo recuperar y manipular el título del documento.

Crea un nuevo archivo llamado script.js en el directorio ~/project utilizando el WebIDE. Agrega el siguiente código JavaScript:

// Accede al título del documento
console.log("Título del documento:", document.title);

// Modifica el título del documento
function changeTitle() {
  document.title = "Updated DOM Properties Lab";
  console.log("Nuevo título del documento:", document.title);
}

// Agrega un botón para demostrar el cambio de título
const button = document.createElement("button");
button.textContent = "Cambiar título";
button.onclick = changeTitle;
document.body.appendChild(button);

Ahora, actualiza el archivo index.html para incluir el archivo 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>

Cuando abres este archivo HTML en un navegador, verás los siguientes comportamientos:

Salida de ejemplo en la consola del navegador:

Título del documento: DOM Properties Exploration

Cuando haces clic en el botón "Cambiar título":

Nuevo título del documento: Updated DOM Properties Lab

Conceptos clave demostrados:

La propiedad document.title recupera el título actual de la página
Puedes cambiar dinámicamente el título del documento utilizando JavaScript
El título aparece en la pestaña del navegador y se puede modificar en tiempo de ejecución

Recupera la URL y los enlaces del documento

En este paso, aprenderás a acceder a la URL del documento y recuperar información sobre los enlaces utilizando propiedades del DOM de JavaScript. Actualizaremos el archivo script.js para demostrar estas capacidades.

Abre el archivo script.js en el WebIDE y agrega el siguiente código:

// Recupera y muestra la URL actual del documento
console.log("URL actual del documento:", document.URL);

// Obtiene el número de enlaces en la página
const linkCount = document.links.length;
console.log("Número total de enlaces:", linkCount);

// Muestra información sobre todos los enlaces
function displayLinkInfo() {
  const links = document.links;
  console.log("Información de enlaces:");
  for (let i = 0; i < links.length; i++) {
    console.log(`Enlace ${i + 1}:`);
    console.log(`  Href: ${links[i].href}`);
    console.log(`  Texto: ${links[i].text}`);
  }
}

// Agrega un botón para mostrar detalles de enlaces
const linkButton = document.createElement("button");
linkButton.textContent = "Mostrar detalles de enlaces";
linkButton.onclick = displayLinkInfo;
document.body.appendChild(linkButton);

Actualiza el archivo index.html para incluir algunos enlaces adicionales:

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

Salida de ejemplo en la consola del navegador:

URL actual del documento: file:///home/labex/project/index.html
Número total de enlaces: 2

Información de enlaces:
Enlace 1:
  Href: https://example.com
  Texto: Example Website
Enlace 2:
  Href: https://labex.io
  Texto: LabEx Learning Platform

Conceptos clave demostrados:

document.URL recupera la URL completa del documento actual
document.links proporciona una colección de todos los enlaces en la página
Puedes iterar a través de los enlaces y acceder a sus propiedades como href y text

Contar y mostrar imágenes en la página

En este paso, aprenderás a contar y mostrar información sobre las imágenes de una página web utilizando propiedades del DOM de JavaScript. Actualizaremos el archivo script.js para explorar la funcionalidad relacionada con las imágenes.

Abre el archivo script.js en el WebIDE y agrega el siguiente código:

// Cuenta el número de imágenes en la página
const imageCount = document.images.length;
console.log("Número total de imágenes:", imageCount);

// Función para mostrar detalles de imágenes
function displayImageInfo() {
  const images = document.images;
  console.log("Información de imágenes:");
  for (let i = 0; i < images.length; i++) {
    console.log(`Imagen ${i + 1}:`);
    console.log(`  Origen: ${images[i].src}`);
    console.log(`  Texto alternativo: ${images[i].alt}`);
  }
}

// Crea un botón para mostrar detalles de imágenes
const imageButton = document.createElement("button");
imageButton.textContent = "Mostrar detalles de imágenes";
imageButton.onclick = displayImageInfo;
document.body.appendChild(imageButton);

// Agrega un área simple de visualización de información de imágenes
const infoDiv = document.createElement("div");
infoDiv.id = "image-info";
document.body.appendChild(infoDiv);

// Actualiza el div con el recuento de imágenes
infoDiv.textContent = `Número de imágenes: ${imageCount}`;

Actualiza el archivo index.html para incluir más imágenes con 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>

Salida de ejemplo en la consola del navegador:

Número total de imágenes: 3
Información de imágenes:
Imagen 1:
  Origen: https://example.com/sample-image.jpg
  Texto alternativo: Sample Image
Imagen 2:
  Origen: https://example.com/another-image.jpg
  Texto alternativo: Another Image
Imagen 3:
  Origen: https://example.com/third-image.png
  Texto alternativo: Third Image

Conceptos clave demostrados:

document.images proporciona una colección de todas las imágenes en la página
Puedes acceder a propiedades de imágenes como src y alt
Crear y manipular dinámicamente elementos de la página utilizando JavaScript

Demostrar las propiedades del cuerpo del documento y las cookies

En este paso, explorarás las propiedades del cuerpo del documento y las cookies en JavaScript, aprendiendo cómo manipular el contenido de la página y trabajar con las cookies del navegador.

Abre el archivo script.js en el WebIDE y agrega el siguiente código:

// Demuestra la manipulación del cuerpo del documento
function modifyBodyContent() {
  // Accede y modifica el cuerpo del documento
  const body = document.body;
  console.log("HTML interno original del cuerpo:", body.innerHTML);

  // Crea un nuevo elemento de párrafo
  const newParagraph = document.createElement("p");
  newParagraph.textContent = "Este párrafo se agregó dinámicamente al cuerpo!";
  body.appendChild(newParagraph);

  console.log("HTML interno actualizado del cuerpo:", body.innerHTML);
}

// Demuestra las propiedades de las cookies
function manageCookies() {
  // Establece una nueva cookie
  document.cookie =
    "labExperience=JavaScript DOM; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

  // Muestra todas las cookies
  console.log("Cookies actuales:", document.cookie);

  // Crea un botón para mostrar las cookies
  const cookieButton = document.createElement("button");
  cookieButton.textContent = "Mostrar cookies";
  cookieButton.onclick = () => {
    alert(`Cookies: ${document.cookie}`);
  };
  document.body.appendChild(cookieButton);
}

// Crea botones para activar las demostraciones
const bodyButton = document.createElement("button");
bodyButton.textContent = "Modificar contenido del cuerpo";
bodyButton.onclick = modifyBodyContent;
document.body.appendChild(bodyButton);

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

Actualiza el archivo index.html para garantizar la compatibilidad:

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

Salida de ejemplo en la consola del navegador:

// Después de hacer clic en "Modificar contenido del cuerpo"
HTML interno original del cuerpo: [contenido HTML inicial]
HTML interno actualizado del cuerpo: [contenido HTML con el nuevo párrafo agregado]

// Después de hacer clic en "Administrar cookies"
Cookies actuales: labExperience=JavaScript DOM

Conceptos clave demostrados:

Acceder y modificar document.body
Crear y agregar dinámicamente nuevos elementos
Establecer y leer cookies del navegador
Interactuar con las propiedades del documento utilizando JavaScript

Resumen

En este laboratorio, los participantes aprenden a explorar las propiedades del Modelo de Objetos del Documento (DOM) utilizando JavaScript al crear un documento HTML estructurado e implementar diversas técnicas de acceso a propiedades. El laboratorio comienza con la construcción de un archivo HTML básico que incluye elementos esenciales como título, cuerpo e imágenes, que sirven de base para comprender las interacciones del DOM.

El ejercicio práctico guía a los aprendices a través del acceso a diferentes propiedades del documento, como el título, la URL, los enlaces y el recuento de imágenes, demostrando cómo JavaScript puede recuperar y manipular dinámicamente los metadatos de una página web. Al trabajar a través de estos pasos, los participantes adquieren experiencia práctica en la examen y la interacción con las propiedades fundamentales del DOM, mejorando su comprensión de las técnicas de desarrollo web del lado del cliente.