JavaScript

Web APIs

DOM

Modificación

Puedes modificar las propiedades de los elementos del DOM con JavaScript. Pega el siguiente código en la consola JavaScript del navegador y observa el comportamiento.

const webApis = document.getElementById('web-apis');
console.log('Antes de manipular:', webApis);

webApis.style = 'color:green';
webApis.textContent = 'Modificado desde JS';
webApis.classList.add('boring');
console.log('Después de manipular:', webApis);

❓ Ejercicio: En el siguiente Codepen, modifica el código de la función JS actualizar para que modifique los elementos titulo y mensaje del HTML via DOM con el contenido del mensaje nuevoMensaje.

<body>
<div class="card">
  <div class="card-header">Mensajes</div>
  <div class="card-body row">
    <div class="col text-center">
      <h5 id="titulo" class="card-title">No tienes mensajes</h5>
      <p id="mensaje" class="card-text"><i class="bi bi-chat" style="font-size: 4rem; color:gray;"></i></p>
      <button type="button" class="btn btn-primary" onclick="actualizar()">Actualizar</button>
    </div>
  </div>
  <div id="estado" class="card-footer text-muted">Sin actualizar</div>
</div>
</body>
const nuevoMensaje = {
  titulo: 'Aprendiendo DOM',
  mensaje:
    'Estoy actualizando un elemento del HTML con un contenido en JS. Ese contenido es fijo en este ejemplo, pero podría venir de una respuesta del servidor de mensajes.'
};
// Actualiza la tarjeta con el contenido del mensaje
const actualizar = function actualizar() {
  const estado = document.getElementById('estado');
  estado.textContent = `Actualizado a las ${new Date().toLocaleTimeString()}`;
};

html { font-size: 75%; padding: 2rem; }