foreach para manipular el DOM

Curso de Javascript Online. Desde cero.

14.  
19.  
25.  
34.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

El método forEach ejecuta la función que recibe como parámetro una vez por cada uno de los elementos del array, en orden.

const days = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];

const recorrerDays = day => {
    console.log("Hoy es " + day);
}

days.forEach(recorrerDays);
const days = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];

const recorrerDays = (day, key) => {
    console.log(key + ": Hoy es " + day);
}

days.forEach(recorrerDays);

Recorrer el DOM

con forEach

document.querySelectorAll('.resaltado').forEach((obj, i) => {
	obj.style.backgroundColor = 'red';
});

con map

Con el método map podremos recorrer arrays. Sin embargo, las etiquetas HTML de una página web no son un array, sino un nodelist, por lo que habrá que hacer la siguiente conversión:

const elements = document.querySelectorAll('div');

Array.from(elements).map(obj => {
    console.log(obj.innerHTML)
});

Ejercicios: forEach con DOM

1. Marcar todas las respuestas correctas con el mismo class y mostrarlas en color rojo cuando pulsemos el botón de ver soluciones.

foreach para manipular el DOM 1
foreach para manipular el DOM 2

2. Sumar inputs.

Al pulsar el botón de calcular, recorrer con un bucle forEach los tres inputs presentes en una página HTML y mostrar su suma dentro de un div.

foreach para manipular el DOM 3

3. Entender el método closest. Esto es teoría. No es un ejercicio.

<div>
	<button>Pulsar</button>
</div>
obj.closest('div').style.background = 'red';
foreach para manipular el DOM 4

4. Cuestionario

Este es el selector que nos permitirá recorrer todos los radios que esten marcados:

document.querySelectorAll('input[type=radio]:checked')
foreach para manipular el DOM 5

5. Presupuesto

foreach para manipular el DOM 6

6. Carta de presentación

A continuación te facilito los textos que puedes usar. No hace falta que los uses todos; con tres de cada categoría, sirve

Motivo

  • Cuento con varios años de experiencia muy sólida como profesional por lo cual me creo capacitad@ para asumir las responsabilidades del puesto que ustedes anuncian.
  • En relación al anuncio publicado donde solicitaban un profesional para su empresa, les presento mi candidatura.
  • El pasado día del mes corriente, se publicó una oferta de trabajo en la que se hacía constar que necesitaban cubrir un puesto de trabajo.
  • En respuesta a su anuncio aparecido en el periódico , me es grato manifestarle mi interés por el puesto .
  • Me dirijo a ustedes con el fin de ofrecerles mis servicios profesionales.
  • En relación al anuncio de referencia tengo el gusto de enviarle mi currículo ya que, como verá en el mismo, creo reunir todos los requisitos para el puesto de trabajo que quieren cubrir.
  • Me pongo en contacto con ustedes para manifestarles mi interés por el puesto de trabajo que solicitaban.
  • Me dirijo a ustedes para hacerles constar mi interés por desarrollar mi futuro profesional en su empresa.
  • Sería de mi agrado poderme integrar en aquella actividad que me permita continuar con lo ya aprendido.

Medallas

  • Como he reseñado en el historial adjunto, aunque solo cuento años de experiencia, confío en mi afán de de superación para llegar a poseer un dominio completo de la profesión. Creo contar con las aptitudes necesarias para poder aportar beneficios muy positivos a su organización.
  • Debido a mis cualidades personales y mi experiencia, me considero capacitado para desempeñar ese trabajo.
  • Me adapto con facilidad al trabajo en equipo y baso mi actuación `profesional en una relación duradera y de confianza con la empresa.
  • El puesto que ustedes ofrecen coincide plenamente con mis objetivos profesionales y constituye para mi un reto profesional, qué trataré de llevar a cabo con todo entusiasmo, para mutuo beneficio.
  • Considero que mis características de formación y experiencia puedan corresponder con las de su anuncio y me complazco en enviarles mi CV para su consideración.
  • Por mi formación y por mi entusiasmo en desarrollar al máximo mi carrera profesional, espero ser un firme candidato para cubrir el puesto que se ofrece.
  • Mis aspiraciones profesionales se dirigen profesionalmente hacia sectores donde mi formación y experiencia podrían consolidarse. Tengo plena disponibilidad para cambios de residencia y viajes.
  • Tanto el interés por ampliar mi carrera profesional, como mi capacidad de trabajo y responsabilidad, pueden resultar de utilidad para una empresa consolidada como la suya.

Objetivo:

  • Agradecería la oportunidad de poder presentarme ante ustedes para contestar cualquier pregunta y ampliar lo resumido en mi historial.
  • Les agradecería me dejasen formar parte del proceso de selección.
  • Por todo ello espero que tenga en cuenta mi candidatura ante cualquier necesidad futura se ponga en contacto conmigo.
  • Desearía formar parte del proceso de selección, y quedo a su disposición para mantener una entrevista personal si lo estiman oportuno.
  • Espero se pongan en contacto conmigo para poderles ampliar mi datos en una entrevista personal.
  • Por todo ello, creo reunir los requisitos que mencionan para el futuro ocupante del puesto, deseando poder formar parte del proceso de selección.
  • Esperando comentar con usted en una próxima entrevista mi historial profesional, aprovecho la ocasión para saludarle atentamente.

Despedida

  • Un cordial saludo.
  • En espera de sus noticias y sin otro particular.
  • Aprovecho la ocasión para agradecerle el interés que ha manifestado por mi candidatura. Atentamente.
  • Muy atentamente.
  • Atentamente.
  • A la espera de recibir noticias suyas, les saluda atentamente.
  • Agradeciéndoles la atención restada , se despide atentamente.

7. Ejercicio: filas

Al pulsar sobre una fila, esta se colorea y se marca el radio button correspondiente a la fila pulsada.

foreach para manipular el DOM 7

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.