En esto de modificar texto o imágenes se hace uso de métodos que realmente es a lo que me refería a esos parámetros que se ven en la consola de Firefox. Que creo que se llama Firefox Developer.
Seleccionar elementos del DOM nos va a permitir modificar nuestro HTML y hacerlo más interactivo. Veamos por ejemplo como modificar el texto de la parte superior.. Primero tenemos que seleccionarlo...
const encabezado = document.querySelector('.contenido-hero h1');
console.log(encabezado);
Ese encabezado que he guardado en la variable <encabezado> es este:
Si deseo acceder al texto hay tres formas
innerText
El texto que está dentro de la etiqueta, creo que es tal cual como el texto que obtienes si lo copias directamente desde la web. Por eso es que si este texto tiene en su CSS el visibility: hidden; entonces no aparece nada en un console.log(encabezado.innerText);.
textContent
No me queda tan claro cuál es su diferencia con innerText pero parece que es tal cual como lo copiarías desde el html sin incluir las etiquetas que pueda tener como <span>. Por eso queda con algunos espacios. Pasa a tener más sentido cuando estás insertando contenido en el DOM. Si ya hay un HTML en donde van a introducir el texto entonces se recomendaría usar este, textContent.
innerHTML
Este es el texto tal como está escrito en el HTML incluyendo las etiquetas como <span> y todo. Si se va a incluir texto en un contenedor pero se necesita, por ejemplo, las etiquetas <p>, entonces usamos este, innerHTML.
Ejemplo de los tres métodos
const encabezado = document.querySelector('.contenido-hero h1');
console.log(encabezado.innerText);
console.log(encabezado.textContent);
console.log(encabezado.innerHTML);
Encadenamiento
No obstante puedo encadenar métodos para obtener directamente el texto del encabezado con cualquiera de las tres maneras.
const textoEncabezado = document.querySelector('.contenido-hero h1').textContent;
console.log(textoEncabezado);
De todas las tres maneras el instructor escogió la que menos me gusta, habría escogido innerHTML.
Ahora bien, de la manera anterior tenemos asignado el texto a la variable textoEncabezado, podría modificarlo asignando el nuevo texto a otra variable y hacer la asignación usando las variables.
let textoEncabezado = document.querySelector('.contenido-hero h1').textContent;
console.log(textoEncabezado);
const nuevoTexto = 'Nuevo Heading';
console.log(nuevoTexto);
textoEncabezado = nuevoTexto;
console.log(textoEncabezado);
Aunque para lo anterior tuve que crear la variable textoEncabezado con let y no con const. Para que pudiera adoptar el nuevo valor, si no tendría que haber usado la expresión completa así:
const nuevoTexto = 'Nuevo Heading';
document.querySelector('.contenido-hero h1').textContent = nuevoTexto;Quedando finamente así:
Cambiar una imagen
En código siguiente estamos accediendo a la imagen dentro de la primera etiqueta con la clase card y colocando eso en una variable llamada imagen. Luego alteramos su enlace usando su método .src.
const imagen = document.querySelector('.card img');
console.log(imagen.src);
// Cambiar la imagen...
imagen.src = 'img/hacer2.jpg';