Clase 8-Manipulacion del DOM-Bruno TL #1
@@ -1 +1,96 @@
|
|||||||
// Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.
|
// Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.
|
||||||
|
//ejercicio 1
|
||||||
|
const titulo = document.querySelector("h1");
|
||||||
|
function cambiarTitulo(titulo) {
|
||||||
|
titulo.textContent = "Comidas clásicas/típicas de Argentina";
|
||||||
|
return(titulo)
|
||||||
|
}
|
||||||
|
|
||||||
|
//ejercicio 2
|
||||||
|
const item = document.querySelectorAll("ul li");
|
||||||
|
for (const i of item) {
|
||||||
|
console.log(i.textContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function itemLista() {
|
||||||
|
const item = document.querySelectorAll("ul li");
|
||||||
|
for (const i of item) {
|
||||||
|
i.classList.add("item-lista");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//ejercicio 3
|
||||||
|
const lista = document.querySelector("#lista-inicial");
|
||||||
|
|
||||||
|
function agregarItem(texto) {
|
||||||
|
const nuevoElemento = document.createElement("li");
|
||||||
|
nuevoElemento.textContent = texto;
|
||||||
|
lista.appendChild(nuevoElemento);
|
||||||
|
}
|
||||||
|
|
||||||
|
//ejercicio 4
|
||||||
|
const parrafos = document.querySelectorAll("#parrafos p");
|
||||||
|
parrafos.forEach(p => {
|
||||||
|
if (p.textContent.includes("importante")) {
|
||||||
|
p.classList.add("destacado");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//ejercicio 5;
|
||||||
|
function nuevoDiv() {
|
||||||
|
const div = document.createElement("div")
|
||||||
|
const h2 = document.createElement("h2");
|
||||||
|
h2.textContent = "Comidas tipicas de la region del litoral";
|
||||||
|
div.appendChild(h2);
|
||||||
|
const p = document.createElement("p");
|
||||||
|
p.textContent = "Algunas de las comidas mas tipicas del litoral pueden ser: ";
|
||||||
|
div.appendChild(p);
|
||||||
|
const listaLitoral = document.createElement("ul");
|
||||||
|
const item1 = document.createElement("li");
|
||||||
|
item1.textContent = "Mbejú";
|
||||||
|
listaLitoral.appendChild(item1);
|
||||||
|
const item2 = document.createElement("li");
|
||||||
|
item2.textContent = "Chipa guazu";
|
||||||
|
listaLitoral.appendChild(item2);
|
||||||
|
const item3 = document.createElement("li");
|
||||||
|
item3.textContent = "Sopa paraguaya";
|
||||||
|
listaLitoral.appendChild(item3);
|
||||||
|
const item4 = document.createElement("li");
|
||||||
|
item4.textContent = "Vori vori";
|
||||||
|
listaLitoral.appendChild(item4)
|
||||||
|
div.appendChild(listaLitoral);
|
||||||
|
listaLitoral.id = "listaLitoral"
|
||||||
|
document.body.appendChild(div);
|
||||||
|
}
|
||||||
|
|
||||||
|
//ejercicio 6
|
||||||
|
function limpiarLista(idLista) {
|
||||||
|
const listaALimpiar = document.querySelectorAll(`#${idLista} li`);
|
||||||
|
for (const i of listaALimpiar) {
|
||||||
|
i.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//ejercicio 7
|
||||||
|
const imagen = document.querySelector("#foto");
|
||||||
|
imagen.setAttribute("src", "foto2.jpg");
|
||||||
|
imagen.setAttribute("alt", "Locro");
|
||||||
|
console.log(imagen.getAttribute("alt"));
|
||||||
|
|
||||||
|
//ejercicio 8
|
||||||
|
function construirLista(arr) {
|
||||||
|
const div = document.createElement("div");
|
||||||
|
div.classList.add("grupo-comidas");
|
||||||
|
const titulo = document.createElement("h2");
|
||||||
|
titulo.textContent = arr[0];
|
||||||
|
div.appendChild(titulo);
|
||||||
|
const lista = document.createElement("ul");
|
||||||
|
for (let i = 1; i < arr.length; i ++) {
|
||||||
|
const item = document.createElement("li");
|
||||||
|
item.textContent = arr[i];
|
||||||
|
lista.appendChild(item);
|
||||||
|
}
|
||||||
|
div.appendChild(lista);
|
||||||
|
return div;
|
||||||
|
}
|
||||||
@@ -176,3 +176,7 @@ h1 {
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-lista {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
@@ -31,5 +31,8 @@
|
|||||||
<p>¿Y este párrafo? ¿Será importante?</p>
|
<p>¿Y este párrafo? ¿Será importante?</p>
|
||||||
<p>Este es otro párrafo del montón.</p>
|
<p>Este es otro párrafo del montón.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="ejercicios-clase-8.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user