- JavaScript manejo del DOM
- Manejar el DOM en JavaScript
- Cambiar color usando el DOM en JavaScript
- JavaScript manejando el DOM por sus etiquetas
- JavaScript manejando el DOM con las clases
- JavaScript manejando el DOM
- Parte 1 Obtener la lista de elementos de etiqueta <p> y mostrarlos en un alert de JavaScript.
- Parte 2. Añadir un nuevo elemento <p> con el texto “Texto del nuevo párrafo” y que sea hijo del body.
- Parte 3. Igual que la parte 2 pero añadido en una posición aleatoria en luegar de añadirse siempre abajo.
La solución propuesta es la siguiente.
HTML
Creamos cuatro párrafos A, B, C y D.Cremos tres botones.
- Primer botón para la parte 1 del caso práctico. Recopila los párrafos y los mustra en un alert.
- Segundo botón para la parte 2 del caso práctico. Crea e inserta un nuevo párrafo.
- Tercer botón para la parte 3. El texto nuevo se inserta en una posición aleatoria.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Páginas interactivas con JavaScript</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Manejar el DOM</h1>
<h2>Document Object Model</h2>
<div id="contenido">
<p>Párrafo A</p>
<p>Párrafo B</p>
<p>Párrafo C</p>
<p>Párrafo D</p>
</div>
<button onclick="miFuncion1()">Recopila párrafos</button>
<br><br>
Crear nuevo párrafo → <button onclick="miFuncion2()">Nuevo párrafo</button>
<br><br>
Crear nuevo párrafo<br>
en posición aleatoria→ <button onclick="miFuncion3()">Parrafo desordenado</button>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS
Damos un poco de estilo a la página. h1 {
text-align: center;
text-transform: uppercase;
color: #4CAF50;
}
h2 {
text-align: center;
color: blue;
}
p {
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
} JavaScript
Parte 1
La parte 1 del ejercicio nos pide mostrar un alert con todos los párrafos existentes.
Creamos la variable parrafos con
document.getElementsByTagName("p")
Esto crea un objeto HTMLCollection con cuatro elementos del tipo HTMLParagraphElement que comienzan a numerarse por cero.
Luego con un bucle for recorremos los cuatro elementos para ir añadiendo su contenido en la variable acumulativa texto.
En este caso ha sido necesario utilizar el método item que permite acceder a cada uno de los elementos del HTMLcollection indicándo su índice.
Utilizamos innerHTML pero en este caso también podríamos haber utilizado innrText ya que únicamente estamos tomando el texto de las etiquetas de párrafo y no estamos tomando o modificando su contenenido HTML.
// PARTE 1
function miFuncion1(){
var texto="";
var parrafos = document.getElementsByTagName("p");
for(var i=0;i<parrafos.length;i++){
texto+=parrafos.item(i).innerHTML+", ";
};
texto=texto.slice(0, -2)+".";//cambia la última coma por punto
alert(texto);
}
Parte 2
La parte 2 del ejercicio nos pide insertar un nuevo párrafo. Lo más sencillo es insertarlo abajo, después de todos los demás elementos.
// PARTE 2
function miFuncion2(){
var nuevotexto = document.createElement("p");
nuevotexto.innerHTML = "Texto del nuevo párrafo";
document.body.appendChild(nuevotexto);
}
Parte 3
La parte 3 del ejercicio nos pide insertar un nuevo párrafo. Hemos añadido la característica de que los nuevos párrafos estén numerados y que se añadan en una posición aleatoria dentro de los párrafos ya existentes.
// PARTE 3
var i=0; //i se usa para numerar los nuevos párrafos
function miFuncion2(){
i+=1;
var parrafos = document.getElementsByTagName("p"); //cuenta los que hay
var nuevo_parrafo = document.createElement('p'); //crea una nueva etiqueta p
var texto = document.createTextNode('Texto del nuevo párrafo '+i);
nuevo_parrafo.appendChild(texto); //añade el texto a la nueva etiqueta p
var alea=Math.floor(Math.random() * parrafos.length); //posición aleatoria
//definimos la variable parrafo_ref que es el párrafo de referencia
//el párrafo de referencia se usa para saber después de quien va el nuevo párrafo
//dentro de los corchetes [] se pone la posición donde ira el nuevo
var parrafo_ref = document.getElementById('contenido').getElementsByTagName('p')[alea];
//insertarmos el nuevo parrafo antes del parrafo de referencia
document.getElementById('contenido').insertBefore(nuevo_parrafo,parrafo_ref);
//si ponemos [-1] en el nuevo párrafo se insertará al final
//si ponemos [0] en el nuevo párrafo se insertará al principio
}
Muchas gracias por publicar! Me ayudó un montón! =D
ResponderEliminarhola, me sirvio mucho, en la ultima funcion debe decir miFuncion3, sino da error, ya que dice miFuncion2. gracias
ResponderEliminarGracias
Eliminar