Ejercicios de práctica de JavaScript
Ejercicio F-3
Mis primeros pasos en Manipulación del DOM.
- Abre https://practica-manipulacion-del-dom.netlify.app/ para practicar
- Mira el textContent del h1 en la consola.
- Dale al textContent del h1 un nuevo string que diga “Estoy agregando un nuevo texto”.
- Elige el primer elemento p y agrégale el siguiente código html en su interior con la etiqueta span : Estoy aprendiendo a manipular el DOM
- Mira por la consola el innerHTML del segundo ul
Para mirar el textContent del h1 en la consola primero lo guardo en la variable titulo accediendo desde el document con el método .querySelector(), porque se que el h1 es único en la página y el .querySelector de devuelve el primer elemento (al ser h1 el único me devuelve el h1). Y luego lo muestro por consola con console.info pasándole como parámetro la variable titulo
let titulo = document.querySelector('h1');
console.info(titulo);
La variable titulo tiene mi etiqueta h1 del DOM y con textContent cambio a un nuevo string que diga “Estoy agregando un nuevo texto”. Lo que me va a cambiar el texto de mi etiqueta h1 por : Estoy agregando un nuevo texto
titulo.textContent = "Estoy agregando un nuevo texto"
Elijo el primer elemento p con el método .querySelector ya que me va a seleccionar el primero de los párrafos y lo guardo en la variable primer_parrafo. Y le agrego el siguiente código html en su interior con la etiqueta span : Estoy aprendiendo a manipular el DOM mediante .innerHTML
let primer_parrafo = document.querySelector('p')
primer_parrafo.innerHTML = "<span>Estoy aprendiendo a manipular el DOM</span>"
Otra forma de poder manipular el primer párrafo, es obtenerlo por su id con:
let primer_parrafo = document.getElementById('primerParrafo')
Para mirar por la consola el innerHTML del segundo ul, selecciono todos los elementos </ul> y accedo al segundo con la notación de corchetes [1]
let segundoUl = document.querySelectorAll('ul')[1];
console.info(segundoUl.innerHTML);