El DOM con javascript: lo básico

Ejercicios para practicar
Evalúate

En estos ejercicios vas a practicar como acceder a los elementos de la página web, así como a crearlos y eliminarlos. Sería bueno que revises la página de introducción al dhtml, y la página de ejemplos

Como referencia puedes empezar por revisar los métodos y propiedades de document y element

Todos los ejercicios van a trabajar con una página modelo ya creada.

Si necesitas recordar detalles sobre las páginas web puedes pasarte por CreaTuWeb

Ojo: no uses el objeto event, se trata de aprender a acceder a los elementos del DOM. Los eventos los practicarás en otra serie de ejercicios.

Lo que se pide
Aclaraciones
En la página web modelo ves que tienes un titular Hola Mundo. Se trata de añadir una función javascript para que al pulsar el botón cambiar este título se convierta en Hola Mundo con Javascript . El unico cambio necesario es el bloque con el texto cambiar y  completar la función cambiar() que aparece en el código de la página.
Debe cambiar de Hola Mundo a Hola Mundo Javascript

Cambio HTML

<div onclick="cambiar()">cambiar</div>

function cambiar(){

   var titular = document.getElementById('titular');

   titular.innerText = "Hola Mundo con Javascript";

} 

Tienes la página web modelo que debe cambiar el color del titular del negro actual a rojo y además debe quedar centrado. El único cambio será en el bloque cambiar y el código de función cambiar()
El bloque cambiar acepta el click, el color del titular cambia a rojo y queda centrado

Cambio HTML

<div onclick="cambiar()">cambiar</div>

function cambiar(){

   var titular = document.getElementById('titular');

   titular.style.color = "red";

   titular.style.textAlign = "center";

} 

Escribe un script de nombre creaDiv() que crea un nuevo bloque div en la página modelo. El bloque se creará al pulsar el botón con texto Crear, sus colores serán texto blanco con fondo rojo y el texto quedará centrado. Este texto consiste en la cadena Javascript permite crear páginas dinámicas.
El botón ya existe solo es necesario escribir la función, procurando usar los métodos de document para crear nodos.

function crearDiv(){

   var txt = document.createTextNode("Javscript permite crear págnas dinámicas");

   var bloque= document.createElement("div");

   bloque.setAttribute("style", 'background:red; color: white; text-align: center'');

   bloque.appendChild(txt);

   document.body.appendChild(bloque);

}

En la página web modelo debes lograr que al pulsar el botón con el texto borrar se deberá eliminar el bloque que aparece bajo el titular, no ocultar, sino borrarlo. Para detalles mira el código fuente de la página. Solo tienes que escribir el código de la función borrar()
Al pulsar el botón el subtítulo debe dejar de existir en el código de la página. No deb producirse error al volver a pulsar el botón.

function borrarDiv(){

    var blq = document.getElementById('subtitulo');

    if(blq != null){

        document.body.removeChild(blq);

    }

}

La página web modelo contiene tres imágenes. Cada imagen está en un bloque figure con un elemento figcaption para un pie de foto. Al pulsar sobre cualquier imagen se debe mostar su atributo alt en su pie de foto. Si el pie ya está relleno se borrará su contenido y no se escribirá nada.
Cada imagen es como un botón que alterna el pie de foto entre vacio (sin texto) y el valor del atributo alt de cada una.

function ponerPie(img){

    var pie = fig.getElementsByTagName('figcaption')[0];

    var img = fig.getElementsByTagName('img')[0];

    if (pie.innerText ==''){

       pie.innerText = img.alt;

       }

    else{

       pie.innerText = '';

       }

}

En este script debes leer todos los elementos tipo imagen de la página y mostrar sus urls en un bloque tipo div cuyo id es fuentes y que ya existe en la página modelo usada para estos ejercicios. El script se ejecutará al pulsar el botón con el texto fuentes
El bloque ya está creado solo tienes que crear la función denominada fuentesImg() asociada al botón fuentes

function fuentesImg(){

var listaImgs = document.getElementsByTagName('img');

//O: listaImgs = document.Images;

var salida = document.getElementById('fuentes');

var ind;

for(ind = 0; ind <listaImgs.length; ind++){

    salida.innerHTML += listaImgs[ind].src+"<br>";

   }

}

El script que tienes que crear en la página modelo debe cambiar la clase del elemento que contiene al encabezado de la página. Al pulsar sobre el titular se añadirá o se eliminarás (toggle) la clase de nombre activo
Tienes que modificar el botón clase y completar la función toggleClase() para producir este efecto.

<!-- El HTML-->

<div onclick = "toggleClase()">Cambiar</div>

<!--el script-->

<script>

function toggleClase(){

var encab = document.getElementById('titular');

encab.classList.toggle('activo');

}

</script>

Escribe el código de una función nuevoBloque() que deberá crear un nuevo elemento div, con una class de nombre destacar. El bloque contendrá, en negrita, el texto Página Modelo. Este bloque debe aparecer justo antes del bloque subtitulo es decir justo después del titular de la página. Se activará con el botón superior que contiene el texto Subtitulo
La función se llamara intercalar()

function intercalar(){

   var miBloque = document.createElement('div');

   var titular = document.getElementById('titular');

   miBloque.innerHTML = "<b>Página Modelo</b>";

   miBloque.classList.add('destacar');

   titular.insertAdjacentElement('afterend', miBloque )

}

En la página modelo tienes un elemento div con un imagen en su interior. Cada vez que hagas click con el ratón sobre el la imagen cambiará.

El bloque tiene como clase carrousel. Dispones de tres imágenes: uno.png, dos.png y tres.png. Se deberán ir sucediendo en forma circular, despues de la última vuelve a la primera

El bloque posee un atributo data-set que almacena el nombre de la imagen visible en cada momento.

El bloque ya tiene asociada la función que activa el carrusel: cambiaImg(). Busca la solución más simple, no hace falta acudir a métodos o propiedades avanzadas.

function cambiaImg(){

    var imgs = ['uno.png', 'dos.png', 'tres.png'];

    var car = document.querySelector(".carrusel");

    var indActual = parseInt(car.dataset.img);

    indActual++;

    if(indActual >= imgs.length){

        indActual = 0;

    }

    car.children[0].src = "/imgs/"+imgs[indActual];

    car.dataset.img = indActual;

}

El primer botón de la barra de botones en la parte superior de la página tiene el texto abrir/cerrar. Al pulsarlo se deben ocultar o mostrar los botones restantes, pero el de abrir/cerrrar debe quedar visible.
El valor de la propiedad display de los botones es inline-block. La barra tiene en el atributo class el valor botones y cada botón tiene como clase boton

function toggle(){
     var barra = document.querySelector(".botones");
     var botones = barra.children;
     var estado = barra.dataset.estado == 'none'?'inline-block':'none';
     for(let i = 1; i < botones.length; i++){
          botones[i].style.display = estado
     }
     barra.dataset.estado = estado;
}

scripts